工作一年多了，相信在座的各位前端也都跟我一样，对在手机上，特别是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 的屏幕上这条线反而会很细。我们可以在这个代码的基础上加上媒体查询来完善它????
.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呢？
说难也不难，这个方法是之前一个同学提供给我的，十分好用????
.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)