今天对对淘宝的flexible是否试用新项目做了考察
flexible原理
前提:
screen.width
乘以devicePixelRatio
得到的是物理像素值 即100vw
安卓 dpr=1
ios dpr>1 dpr=2 or dpr =3
但实际上,虽然ios的dpr>1,得出的物理像素值很高,但设备做了一些处理,仍然按照宽为screen.width的模式展示 (可以理解为按照dpr=1 去展示了)
所以我们这样写
<meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
不会出现ios设备页面比安卓页面看着大两倍
淘宝希望页面宽按照 物理像素 展示 即 screen.width*dpr = 100vw
所以干了两件事
1 动态修改viewport
<meta name="viewport" content="initial-scale=?, maximum-scale=?, minimum-scale=?, user-scalable=no">
因为dpr变大了 屏幕上多个点去展示1个px ui必然展示不完 ,所以要动态缩放viewport scale=1/dpr
2 使用rem
淘宝项目rem比率 1rem = 10vw = 10*screen.width*dpr
需要用js动态修改html的font-size
我目前做的项目适配 都是基于假定dpr=1 的基础上做的,我做了有限的测试,并没有发现我们的页面清晰度低于淘宝的方式,并且动态修改页面属性,某些低能设备会闪,因此使用另一方案
html { font-size: calc( 16px + (24 - 16) * (100vw - 400px) / (800 - 400) ); }
该方案新项目已用,目前仍在测试阶段,未完待续。。。