移動端web app自適應佈局探索與總結

要掌握的知識點：

　　

iphone6 屏幕尺寸爲 375*667 （pt）也就是 網頁 全屏顯示時候 document.documentElement.clientWidth------能夠理解爲屏幕越大這個值越大（可是像素不必定高）

　　　　　　dpr(設備獨立像素):2.0   可用（window.devicePixelRatio）得出 （------------像素越高 或者屏幕越小-------dpr越大）

　　　　　　　　　　　　　　window.devicePixelRatio = 物理像素 / dips

　　　　　　　　　　　　　　

 　　　　　　屏幕分辨率爲 750*1334   (px)  ppi：326

------------------------------------------------------------------------------

對比 sony z2  屏幕尺寸爲327*580

dpr(設備獨立像素):3.333

 

　　在Android中，規定以160dpi爲基準，1dp=1px。若是密度是320dpi，則1dp=2px，以此類推

----------------------------------------------------------------------------------------------------------

思考：

有個常見的現象，就是 pc端 通常字體 設置爲12px 爲正常字體 能夠看清楚，可是把這個網頁放到手機端遊覽 字體就會變得很小，爲何？

由於pc端dpr 通常都是1,因此當設置爲12px時是 真正的12px，

而 手機端 如今大部分都是高清屏幕

例如， iphone6 dpr=2 那麼 pc上12px大小的字體，放到iphone6上就會被縮小兩倍，

　　　　sony z2  dpr=3.3 因此pc上12px大小的字體，放到z2上就會被縮小3.33倍，

　　　　有 dpr=1 的手機嗎？

　　　　有！

　　　　在舉例 iphone 3gs

　　　　iphone 3gs　屏幕尺寸爲 320*480  分辨率  480*320px  dpr=1

　　　　iphone  4  屏幕尺寸爲 320*480  分辨率  960*640px  dpr =2

　　　　也就是說：pc上12px的字，在iphone3gs 上能夠看清，且同pc上字體大小同樣，

　　　　　　　　　pc上12px的字，在iphone4 上會縮小兩倍，也就是說pc上12px大小的字  在 iphone4上一樣大小 得寫24px才行（實際不用，請看下文）

 

有一個div style='多少 px‘  放到iphone4上 會是寬度全屏 是320px？ 仍是 640px?

答案是 640px，

 

二

 

<meta name="viewport" content="width=device-width，initial-scale=1,maximum-scale=1, minimum-scale=1">

 

　　以上這段作移動端時候都會粘貼進去，（上面討論的字看不清的狀況就不存在了）爲何

　　

device-width的計算公式爲：設備的物理分辨率/(devicePixelRatio * scale)------能夠理解爲 device-width 爲手機的屏幕大小

 

那這時候有一個div style='多少 px‘  放到iphone4上 會是寬度全屏 是320px？ 仍是 640px?

答案是 320px

　　

那麼此時能夠總結前端設計工做流（網易作法）

1設計師 按照iphone6  像素  設計    750px  *1334    px

2 前端    

0)

<meta name="viewport" content="width=device-width，initial-scale=1,maximum-scale=1, minimum-scale=1">

注意：上面這句不加的時候 iphone6的 document.documentElement.clientWidth=980####上面這句加上的時候 iphone6的 document.documentElement.clientWidth=375

注意：上面這句不加的時候 iphone6的 document.documentElement.clientWidth=980####上面這句加上的時候 iphone6的 document.documentElement.clientWidth=375

注意：上面這句不加的時候 iphone6的 document.documentElement.clientWidth=980####上面這句加上的時候 iphone6的 document.documentElement.clientWidth=375

1)便於計算
html{
　　font-size:100px
}

2)那麼這個時候想要讓寬度全屏只需設置body7.5rem

body{
　　width: 7.5rem
}

3)動態改變html的font-size
<script>

　　　　document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px';

</script>

得出結論： iphone6的時候 html的 font-size 爲50px  ( 375/7.5  +'px' = 50 px. )
　　　　　　body的 寬度爲 7.5*50 = 375px 因此全屏了就    

)

同理 sony z2 （加上viewport後）document.documentElement.clientWidth = 360 #### 不加的話爲document.documentElement.clientWidth = 980

得出結論： sony z2 的時候 html的 font-size 爲50px  ( 360/7.5  +'px' = 48 px. )
　　　　　　body的 寬度爲 7.5*48 = 360px 因此全屏了就  

爲何 兩個手機 在不加viewport 時候   document.documentElement.clientWidth = 980？
由於當初移動設備興起，想遊覽全部網頁 包括pc端的網頁，那這個時候問題來了，因爲手機屏幕過小，網頁放置不下，因此出現了視口的概念，並默認爲980，這樣至關於 （好比通常pc網頁視口寬度爲1024）告訴遊覽器 你把1024寬的網頁 放到另外一個 980寬的是口裏，而且要所有顯示，因此係統會把網頁縮小980/1024 倍。放到980裏，固然真實的手機視口可能都沒有那麼大。好比iphone6 屏幕寬度 只有375 ，爲何當初視口不定位375？ 由於 若是把1024寬的網頁 縮放到375寬的屏幕中 要縮小四倍 才能所有顯示，這樣網頁中的內容基本都會過小 而看不清！！
那麼我手機視口也定爲1024呢？這樣卻是不縮放了，網頁和pc端同樣大，可是會出現橫向豎向滾動條太多，遊覽起來費事，因此定爲980 是中間的一個值

 

 總結前端設計工做流（淘寶作法）

     

 

舉例

0)iphone 6

<meta name="viewport" content="width=device-width，initial-scale=0.5,maximum-scale=1, minimum-scale=1">
2     document.documentElement.clientWidth =750（不是原來的375）

3    html的 　font:size = 75px

4  若是想要body橫向全屏

　　body{
　　　　width: 10rem
　　}

 

 

 參考資料：

http://isux.tencent.com/web-app-rem.html

http://www.cnblogs.com/well-nice/p/5509589.html

http://www.cnblogs.com/dreamlht/p/5112390.html

http://www.chinaz.com/web/2015/1110/468774.shtml#0-tsina-1-17945-397232819ff9a47a7b7e80a40613cfe1