移动端自适应方案

研究样本

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的直观感受