移动端宽度的一些知识

Posted 2020-08-09

　　在做移动端的时候，经常接触到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在大多数浏览器是值得信赖的。