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

1,261 阅读2分钟

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

当然了,如果不加以处理,在 DPR1 的屏幕上这条线反而会很细。我们可以在这个代码的基础上加上媒体查询来完善它👇

.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)