移動端web螢幕適配方案整理
網上關於移動端web適配的問題已經有很多很好的文章了,做一個簡單的整理。
常用viewport屬性
1、width
常用設定width=device-width,視口寬度等於螢幕寬度
2、initial-scale、maximum-scale、minimum-scale
常用設定initial-scale=1, maximum-scale=1, minimum-scale=1,初始化縮放、最大縮放、最小縮放都為1;或根據螢幕dpr動態計算縮放比例。
3、user-scalable
常用設定為user-scalable=no,不允許使用者縮放。
4、target-densitydpi
常用設定target-densitydpi=device-dpi,資料顯示部分瀏覽器已經廢棄。
常用方案
1、寬度使用百分比,高度自適應
viewport 配置 width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no。
比較適合列表排列和一些佈局比較簡單的情況,列表圖片可能需要在服務端進行統一處理,遇到需要設定的高度時候,可能需要動態計算。
案例:騰訊新聞移動端。
2、使用rem,dpr預設為1
viewport配置width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no。html標籤設定dpr為1、根據螢幕尺寸動態計算html標籤font-size。
頁面佈局相對靈活,圖片高度可以設定rem,不依賴服務端處理。如果整體佈局全部使用rem,各種手機展示效果基本一致,包括每行文字顯示個數。
案例:網易新聞移動端。
3、使用rem,根據devicePixelRatio設定dpr。
viewport配置initial-scale=1/dpr, maximum-scale=1/dpr, minimum-scale=1/dpr, user-scalable=no。html標籤設定dpr為window.devicePixelRatio、根據螢幕尺寸動態計算html標籤font-size。
本方案和方案2類似,不過對高清屏進行了相應的處理。字型用px需要進行dpr的適配處理,解決了1px顯示問題。
案例:淘寶移動端
4、使用target-densitydpi
viewport配置width=640, user-scalable=no, target-densitydpi=device-dpi。
和方案1效果類似。
案例:荔枝FM移動端
最後記錄一個使用rem的小問題,圖片使用rem設定等寬高,並設定border-radius為50%時,部分瀏覽器出現頭像不是圓形的問題,應該是rem轉換為px帶有瀏覽器不支援的小數點導致的。