viewport的target density

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. 该设备上的所有浏览器都是该值。
原文地址:https://www.cnblogs.com/breakdown/p/3105289.html