懶人必備的移動端定寬網頁適配方案

NO IMAGE

本文最初釋出於我的個人部落格:咀嚼之味

如今移動裝置的解析度紛繁複雜。以前僅僅是安卓機擁有各種各樣的適配問題,如今 iPhone 也擁有了三種主流的解析度,而未來的 iPhone 7 可能又會玩出什麼新花樣。如何以不變應萬變,用簡簡單單的幾行程式碼就能支援種類繁多的螢幕解析度呢?今天就給大家介紹一種懶人必備的移動端定寬網頁適配方法。

首先看看下面這行程式碼:

<meta name="viewport" content="width=device-width, user-scalabel=no">

有過移動端開發經驗的同學是不是對上面這句程式碼非常熟悉?它可能最常見的響應式設計的 viewport

這樣你的頁面在所有的 iPhone 上,無論是 寬 375 畫素的 iPhone 6 還是寬 414 畫素的 iPhone 6 plus,都能顯示出定寬 320 畫素的頁面。

Android

Android 上的適配被戲稱為移動端的 IE,確實存在著很多相容性問題。Android 以 4.4 版本為一個分水嶺,首先說一說相對好處理的 Android 4.4

Android 4.4

為了相容性考慮,Android 4.4 以上拋棄了 target-densitydpi

Android 4.0 ~ 4.3

作為 Android 相對較老的版本,它對 meta 中的 width 屬性支援得比較糟糕。以三星 Note II 為例,它的 device-width 是 360px。如果設定 viewport 中的 width (以下簡稱 vWidth

其中,TARGET_WIDTH

如果你不希望你的頁面被使用者手動縮放,你還可以加上 user-scalable=no