dips(device independent pixels,设备独立像素)与屏幕密度有关。dips可以用来辅助区分视网膜设备还是非视网膜设备。
window.devicePixelRatio是设备上物理像素和设备独立像素(device-independent pixels (dips))的比例: window.devicePixelRatio = 物理像素 / dips
当页面设置了<meta name="viewport" content="width=device-width">
时候,document.documentElement.clientWidth
在大部分浏览器下,得到的是布局视区的宽度,等同于dips(设备独立像素)的宽度而不是物理像素的宽度。即此时浏览器的宽度为设备独立像素的宽度
对于screen.width
的值:
- 在iOS视网膜设备上,
screen.width
返回dips宽设备独立像素。因此,在竖着显示的时候,视网膜显示屏的ipad和非视网膜显示屏的ipad返回的都是768. - 在上面提到的三个Android设备上,
screen.width
返回的是物理像素宽度,分别480, 720, 和800. 该设备上的所有浏览器都是该值。