我在移动端上遇到的那些疑难杂症

工作一年多了，相信在座的各位前端也都跟我一样，对在手机上，特别是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)

扫描下方的二维码或搜索「tony老师的前端补习班」关注我的微信公众号，那么就可以第一时间收到我的最新文章。