移動端寬度的一些知識

標籤：

　　在做移動端的時候，經常接觸到devicePixelRatio這個單詞，這個單詞的定義就是：

　　　　window.devicePixelRatio是裝置上物理像素和裝置獨立像素(device-independent pixels (dips))的比例。

　　公式就是：

　　　　window.devicePixelRatio = 物理像素 / dips；

　　小結論：

　　　　當版面設定了<meta name="viewport" content="width=device-width">時候，document.documentElement.clientWidth在大部分瀏覽器下，得到的是布局視區的寬度，等同於dips的寬度。

　　　　①在ios裝置中，window.screen.width返回的是dips寬，因此，在豎著顯示的時候，視網膜顯示屏的ipad和非視網膜顯示屏的ipad返回的都是768.

　　　　　　screen.width乘以devicePixelRatio得到的是物理像素值。

　　　　②在安卓裝置中，window.screen.width返回的是物理像素寬度。

　　　　　　screen.width除以devicePixelRatio得到的是裝置獨立像素(dips)值。

　　　　③devicePixelRatio在大多數瀏覽器是值得信賴的。

 

移動端寬度的一些知識