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

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