移動端開發的幾點建議

更多文章

1. 頁面適配

這一點不能算是建議，應該說是解決方案。

最近查了好多關於移動端適配的資料，把人都看懵了，收穫瞭如下名詞

CSS像素、物理像素、邏輯像素、設備像素比、PPI、DPI、DPR、DIP、Viewport

說實話，我一點都不想了解這些名詞到底有着什麼樣的解釋，只想知道怎麼讓開發的頁面能適配不一樣的移動端設備。簡單點說，我想知道怎麼獲取設備的真實開發尺寸（根據這幾天查資料所得，這個概念叫邏輯像素）。

例如 iphone 6，它的分辨率是 750 x 1334，真實開發尺寸是 375 x 667（邏輯像素），打開 chrome 控制檯，切換 device toolbar， 選擇 iphone 6 設備就能看到。

蘋果設備大多都能查到它的開發尺寸是多少。但安卓設備不是，沒有這種條件，因此要靠其餘手段了。

根據查資料所得，目前有兩種方法能夠得到移動設備的真實開發尺寸。

第一種方法：設備像素比

真實開發尺寸 = 分辨率 / 設備像素比

經過 window.devicePixelRatio 能夠獲取設備像素比，例如 iphone 6 的設備像素比是 2，即 分辨率 / 2 = 真實開發尺寸，750 x 1334 / 2 = 375 x 667。移動設備的分辨率隨處可查，看發行參數就知道了，而後再經過瀏覽器獲取設備像素比，從而得知設備真實開發尺寸。

第二種方法

這種方法不須要知道設備分辨率，也不須要知道設備像素比，簡單粗暴。

在頁面創建一個恰好鋪滿全屏的 div 元素，而後獲取它的寬高，這個寬高就是該設備的真實開發尺寸。

.test-div {
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    background: red;
}

document.querySelector('test-div').clientWidth // 寬
document.querySelector('test-div').clientHeight // 高

恰好我手上有一個華爲 m5 平板和華爲 m5 pro 平板，大小分別爲 10.1 寸和 10.8 寸，分辨率爲 1920 x 1200，2560 x 1600。獲取到它們的真實開發尺寸分別爲 960 x 600 1024 x 640，根據分辨率和真實開發尺寸還能得知兩個設備的設備像素比分別爲 2 和 2.5。
如圖所示（華爲 m5）

爲了證實推斷是正確的，我拿了一個專門在 m5 pro 上使用的 app 放在 chrome 上運行（模擬該設備的開發尺寸），完美適配。

另外提一下，爲手機開發的網站放在其餘手機上通常都能適配，可是放在平板上很難適配，畢竟屏幕大小差太多了，反之亦然。沒有網站能完美適配全部的端，固然，簡單的頁面仍是能夠的，不過得寫一堆 @media screen。

2. 相對長度計量單位

在 css 中有不少相對長度，其中經常使用的有 em rem vw vh，在小程序上有 rpx。

在此，我建議你使用 vw 和 vh 做爲移動端開發的相對單位，包括字體大小、元素寬高、距離等等。

理由以下：

vw vh 換算方便

1vw = 屏幕 1% 的寬度
1vh = 屏幕 1% 的高度

兼容性好

不管是在網頁仍是在小程序，只要支持 css 就能完美兼容。

PS：在頁面上有 input 輸入框的時候，不要使用 vh 做爲計量單位，由於軟鍵盤彈出時會壓縮頁面高度，若是用 vh 做爲計量單位，會致使頁面嚴重變形，此時用 vw 就沒有這個風險了。

固定高度使用 px

像邊框或者分隔線等「固定」高度的，能夠使用 px。

3. 柵格化佈局

若是開發的 app 只是應用在手機上，適配通常不會有什麼問題，由於屏幕大小不會相差不少。可是放到平板上就會有問題，若是計量單位使用的是相對長度，各個元素相對於手機都會變大，致使不美觀。

在這種狀況下，咱們能夠使用柵格化佈局。例如在手機上採起兩列布局，在平板上採起三列布局。另外還要用 @media 根據分辨率來調整元素的大小、字體的大小等等。

PS：若是一個 app 要應用在手機和平板上，相對計量單位建議使用 rem，這樣在手機和平板上能夠設置兩個不一樣的根元素字體大小。

推薦閱讀

• rem
• 柵格化系統的原理以及實現

4. 儘可能使用移動端專用的 UI 組件庫

PC 端的 UI 組件庫在移動端上會有不少樣式 BUG，如非必要，不要使用。

5. 設備狀態欄

若是 app 在移動設備上不須要全屏展現，那麼在 chrome 上模擬設備大小時要減去設備狀態欄的高度。

固然，這通常都不會有什麼問題，只是爲了多加一條建議。