移動端自適應方案

研究樣本

1. 手淘 ml.js
2. 天貓首頁
3. 手機攜程

研究結論

1.手淘

• 獲取手機dpr(window.devicePixelRatio)，動態生成viewport。
• 換取手機寬度，分成10份，每一份的寬度即是rem的尺寸。
• 根據設計稿尺寸(px)通過計算，轉換成rem去佈局。
• ps:海外淘寶並沒有這樣做，而是scale1.0並且圖片大概都是2倍圖。

2.天貓

• 採用scale=1.0 寫死viewport。
• flex佈局，篤定認爲佈局尺寸是375 (iPhone6)
• rem 確定非flex的元素

3.手機攜程

• 採用scale=1.0 寫死viewport
• px + 百分比佈局

完美視口

<meta name="viewport" content="initial-scale=1.0,width=device-width,user-scalable=0,maximum-scale=1.0"/>

dpr
dpr是devicePixelRatio的簡寫，也就是屏幕分辯比。

坊間對於dpr更通俗的說法叫

• 一倍屏
• 兩倍屏

scale
scale是屏幕拉伸比。也就是視口上的initial-scale , maximum-sacle 等屬性。

scale 和 dpr的關係是倒數。

直觀感受
這是我對dpr的直觀感受