关于flexible初步考察

今天对对淘宝的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) ); }

该方案新项目已用，目前仍在测试阶段，未完待续。。。