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

工做一年多了，相信在座的各位前端也都跟我同样，对在手机上，特别是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老师的前端补习班」关注个人微信公众号，那么就能够第一时间收到个人最新文章。