我正在尝试理解仅限移动设备页面的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
是如何计算的?
这是个有趣的问题。我熟悉媒体查询对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
来自哪里,但它似乎与编写媒体查询无关。