理解CSS媒体查询结果

问题描述 投票:2回答:1

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

我正在测试HTC One M7,这是1080x1920467dpi - 制造商的规格。

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

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

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

首先,宽度报告的像素不应该是逻辑像素,而不是物理像素?我的意思是iPhone3GSiPhone4都报告了width320px,尽管后者实际上是640个物理像素。请参阅How to target iPhone 3GS AND iPhone 4 in one media query?当匹配给定查询时,我应该如何知道“pixel”的浏览器含义?

其次,报道的288dpi与实际设备467dpi无关。这个3dppx是如何计算的?

css mobile media-queries pixels
1个回答
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) { }

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

© www.soinside.com 2019 - 2024. All rights reserved.