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

首先问大家一个问题，如何在 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 的屏幕上这条线反而会很细。我们可以在这个代码的基础上加上 媒体查询 来完善它:point_down:

.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 呢？

说难也不难，这个方法是之前一个同学提供给我的，十分好用:point_down:

.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)
复制代码