理解 CSS 媒体查询结果

Question

我正在尝试了解仅移动页面的 CSS 媒体查询。我的最终目标是让我的页面上的字体大小在物理单位（英寸/厘米）中大致相同，而不管 decice 物理大小和分辨率如何。但是我看到媒体查询报告的内容与设备规格无关。

我正在测试 HTC One M7，即 1080x1920、467dpi - 制造商规格。

媒体查询报告的准确数字是：

width (as reported by min-width/max-width): 1080px

resolution (as reported by min-resolution/max-resolution): 288dpi or 3.0dppx

首先，报告的宽度像素不应该是逻辑像素，而不是物理像素吗？我的意思是iPhone3GS 和iPhone4 都报告了width 的320px，尽管后者实际上是640 个物理像素。见How to target iPhone 3GS AND iPhone 4 in one media query? 当匹配给定查询时，我应该如何知道“pixel”的浏览器是什么意思？

其次，报告的288dpi与实际设备467dpi无关。这个3dppx是怎么计算出来的？

Answer 1

这是一个有趣的问题。我熟悉媒体查询在 iOS 设备上的工作方式，但对 Android 设备则不太熟悉。无论如何，我会尝试一下。

让我们从dppx 开始，您可能知道它是衡量每个像素中有多少物理点（让我们使用您的术语“物理像素”和“逻辑像素”）。 3dppx 表示屏幕的每个逻辑像素都由一个 3x3 的物理像素网格组成。要使用 iOS 术语，您的显示器具有@3x 分辨率，如 iPhone 6 Plus。

您可以在此处查看各种设备dppx 值的列表：

http://bjango.com/articles/min-device-pixel-ratio/

（该网站指的是-webkit-min-device-pixel-ratio，早于dppx，但我认为意思完全一样。）

如果您知道设备的物理宽度和dppx，您可以使用以下公式计算其逻辑宽度，您可以在媒体查询中使用：

device width / dppx = logical width

对于您的设备，这应该是：

1080 / 3 = 360

因此，我希望以下媒体查询以纵向模式定位您的设备：

@media only screen and (max-width: 360px) { }

至于288dpi：1dppx 设备有96dpi，3 x 96 = 288。我不确定制造商的467dpi 来自哪里，但它似乎与写作无关媒体查询。