什么是设备宽度？

Question

我正在读这个quirksmode article。几段落下你就明白了：

  

Web开发人员希望screen.width / height给出数量   整个屏幕上的物理像素。然而，另一种选择是   它给出了理想视口的宽度和高度;那个你   使用width = device-width时获取。

他指的是width=device-width。

Answer 1

基本上，device-width是一个可以用作媒体查询的目标条件的值。摘录指的是device-width可能无法返回设备具有的实际物理像素数。许多设备将返回虚拟＆＃34;由于像素密度较低或较高的屏幕，因此像素数。表现出这种行为的设备的一个很好的例子是带有Retina显示屏的iPhone和iPad。 Ferrrmolina在评论中发布了一条好reference link which explains the phenomenon。

  

device-width ...是输出渲染表面的宽度   设备。对于连续介质，这是屏幕的宽度。   ......'px'单元属于逻辑类型，如Units部分所述。

https://drafts.csswg.org/mediaqueries-3/#device-width

Quirks模式的功能得到了很好的回答here, on MDN：

  

对于低dpi设备，单位px表示物理参考   像素和其他像素是相对于它定义的。因此，定义了1in   为96px，等于72pt。这个定义的结果是   在这些设备上，长度以英寸（in），厘米（cm）为单位，   毫米（mm）不必与物理长度相匹配   具有相同名称的单位。

     

对于高dpi设备，英寸（英寸），厘米（cm），毫米（mm）   被定义为他们的物理对应物。因此px单位是   相对于它们定义（1英寸的1/96）。