關於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) ); }

該方案新項目已用，目前仍在測試階段，未完待續。。。