我所遇过的挪动端兼容性问题

事情一年多了，置信在坐的列位前端也都跟我一样，对在手机上，特别是
iphone上涌现的种种兼容性以为异常头疼。这篇文章仅作为一份记录供人人参考。

怎样画出 1px 的线？

起首问人人一个题目，怎样在iphone上画出1px的线？
萌新能够就以为，这不是很简朴吗，看我一把梭：

.line {
border-top: 1px solid #000
}

固然，假如没有不测的话，设想走查的时刻就会过来跟你说，你这线太粗了，跟设想稿上的不一致！

因为每部差别型号的手机的DPR都不尽相同，所以同样是1px在一些手机上很细，在一些手机上却看起来很粗

一个简朴的处理方案

.line {
position: relative;
&::after {
position: absolute;
bottom: 0;
content: "";
width: 100%;
border-top: 1px solid #000;
transform: scaleY(.5)
}
}

固然了，假如不加以处置惩罚，在 DPR 为 1 的屏幕上这条线反而会很细。我们能够在这个代码的基础上加上媒体查询来完美它&＃x1f447;

.line {
position: relative;
&::after {
position: absolute;
bottom: 0;
content: "";
width: 100%;
border-top: 1px solid #000
}
@media screen and (-webkit-min-device-pixel-ratio: 2) {
&::after {
transform: scaleY(.5)
}
}
}

闻一知十

看完上面的代码，我们能够再想一个题目，怎样画出一个带圆角的border呢？
说难也不难，这个要领是之前一个同砚供应给我的，非常好用&＃x1f447;

.line {
position: relative;
&::after {
position: absolute;
top: 0;
left: 0;
content: "";
width: 100%;
height: 100%;
border: 1px solid #000；
border-radius: 2px
}
@media screen and (-webkit-min-device-pixel-ratio: 2) {
&::after {
width: 200%;
height: 200%;
transform: scale(.5);
border-radius: 4px;
transform-origin: 0 0
}
}
}

键盘弹出后页面规划错位

征象

ios 12体系在挪动端存在如许的 BUG，复现步骤

• 点击涌现弹框
• 点击输入框唤起键盘
• 输入终了后发明弹框上的按钮点击不了了

固然，这个 BUG 只需你悄悄滑动页面就发明题目被轻松处理了。实在处理的道理就是触发页面重绘，让被顶起来的页面节点回到原位。

处理方案

click () {
if (/os 12/ig.test(navigator.userAgent)) {
window.scrollTo(0, 0)
}
}

假如你用 Vue，也能够把点击事宜封装为一个指令，然后把这段代码加进去。

点击返回上一页页面不革新

征象

这也是我在项目中碰到的一个奇异的 BUG，点击「返回」按钮返回到上一页，然则页面却没有革新。

缘由

实在这是 ios 微信的缓存机制形成的，跳转到下一页时仍然会缓存当前页。

处理方案

window.addEventListener('pageshow', function(e) {
if (e.persisted) {
location.reload();
}
});

页面加载后返回上一页

征象

ios9 微信在页面加载后自动返回上一页

缘由

ios9 微信会自动触发 popstate 事宜，从而自动返回了上一页

处理方案

setTimeout(() => {
window.addEventListener('popstate', () => {
//
})
}, 1000)

扫描下方的二维码或搜刮「tony先生的前端补习班」关注我的微信民众号，那末就能够第一时间收到我的最新文章。