媒体查询如何区分大型智能手机分辨率和低平板电脑分辨率显示

Question

示例：

三星galaxy S7 - 5.1英寸，1440 x 2560像素 - 智能手机

Acer Iconia Tab A500 - 10.1英寸，800 x 1280像素 - 平板电脑

如果我设置@media屏幕和（max-width：480px），这应该识别智能手机。 如果平板电脑的分辨率较低，怎么可能呢？

媒体查询是否衡量其他内容而不是真正的分辨率？

Answer 1

CSS中的单位px是参考像素，而非物理像素：

  

参考像素是设备上一个像素的视角，像素密度为96dpi，距离读取器的臂长度。对于标称臂的28英寸长度，视角因此约为0.0213度。对于手臂长度的读数，1px因此对应于约0.26毫米（1/96英寸）。

     

（层叠样式表2级修订版2（CSS 2.2）规范，section 4.3.3. Lengths）

通常，1px是具有＆＃34;标准定义＆＃34;的设备上的一个物理像素。像素密度约为90-120像素/英寸。桌面浏览器往往使1px等于他们认为是一个设备像素。

与1px对应的设备像素数取决于设备的像素密度和放大倍数。在默认放大级别

  <meta name="viewport" content="width=device-width,initial-scale=1">

S7为1px使用约3.5个设备像素。

要区分具有高像素密度的设备，您可以使用

@media screen and (min-resolution: 2dppx) {
  /* This is a high-dpi device */
}