我正在尝试理解仅限移动设备页面的CSS媒体查询。我的最终目标是让我的页面上的字体大小以物理单位（英寸/厘米）大致相同，而不管物理大小和分辨率如何。但我所看到的媒体查询报告与设备规格无关。
我正在使用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是如何计算的？
答案 0 :(得分：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来自哪里，但是它似乎与编写媒体查询无关。