移動端的適配問題

設備像素、CSS像素==設備獨立像素 這三者的關係

在PC端能夠經過 screen.width/height 屬性來獲取設備獨立像素值，在PC端這個值把它當成咱們常說的屏幕分辨率（實際上它不是屏幕分辨率，可是因爲在PC端設備像素和設備獨立像素數值相等，纔有這麼一個不許確的說法）。但你把瀏覽器切換到設備模式時，也就是在移動端環境下經過上面的 screen.width/height 獲取的不是移動設備的分辨率，而是移動設備的屏寬/高。如：Iphone 5s下 screen.width =320、screen.height = 568。本覺得是瀏覽器裏的設備環境沒有徹底模擬真實的移動設備環境，但是用真機測試時，仍是出現一樣的結果screen.width =320、screen.height = 568。值得注意的是：無論你手機是否切換到橫屏，這兩個值仍是同樣的。因此無論是移動端仍是PC端經過screen.width/height 獲取的這個值是設備獨立像素（CSS 像素），而不是設備的屏幕分辨率，由於設備的屏幕分辨率對於WEB開發者來講是沒法經過代碼來得到的，是徹底透明的。

設備像素比(dpr) = 物理像素 / 設備獨立像素

設備像素比也是設備生產的時候設置好的，在javascript中，能夠通window.devicePixelRatio獲取到當前設備的dpr.

devicePixelRatio稱爲設備像素比，每款設備的devicePixelRatio都是已知，而且不變的，目前高清屏，廣泛都是2，不過還有更高的，好比2.5, 3 等，我魅族note的手機的devicePixelRatio就是3。淘寶觸屏版佈局的前提就是viewport的scale根據devicePixelRatio動態設置。

 

<metaname="viewport"content=「width=device-width,minimum-scale=1.0,maximum-scale=1.0」/>中content所設置的視口，稱爲佈局視口，最大值由瀏覽器廠商規定 ,能夠document.documentElement.clientWidth獲取其寬度.

rem

相關連接：http://www.tuicool.com/articles/FjMfuyM；http://www.cnblogs.com/lyzg/p/4877277.html

rem是css3 的一個長度單位 ，相對文檔跟元素 html；好比設置html font-size=100px;那麼1rem=100px;以後的全部元素均可以用這個基準值來設置大小；