網上關於移動端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帶有瀏覽器不支援的小數點導致的。

參考文章: