我所遇過的移動端兼容性問題

工做一年多了，相信在座的各位前端也都跟我同樣，對在手機上，特別是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老師的前端補習班」關注個人微信公衆號，那麼就能夠第一時間收到個人最新文章。