CSS媒体功能“分辨率”定义像素密度?

时间:2014-02-12 18:32:07

标签: css css3 media-queries resolution

'分辨率'似乎经常被用作描述以a x b表示的视口尺寸/设备像素的术语:

e.g。 960px x 640px(适用于iPhone 4)

然而,根据我的理解,媒体查询中使用的是一些盗用,至少,分辨率表示输出设备的像素密度。

我可以确认媒体功能“分辨率”基本上是表示像素密度吗?

即。显示器的对角线像素分辨率除以对角线尺寸(以英寸为单位)

那么,再以iPh​​one 4为例,分辨率将被定义为330 ppi? (或330dpi

我基本上有兴趣知道分辨率功能是否可用于定位具有特定像素密度的设备。

Brian LePore的  article他建议移动设备将实际dpi值舍入为“低密度屏幕为120 DPI,中密度屏幕为160 DPI,高密度为240 DPI,最后为高密度为320 DPI” ”。

这是否正确,这是否意味着您实际上无法定位特定的dpi?

@media screen and (resolution: 330dpi) {}

@media screen and (resolution: 311dpi) {}

最终将被视为/舍入为

@media screen and (resolution: 320dpi) {}

1 个答案:

答案 0 :(得分:1)

是的,分辨率肯定是表示像素密度。

如果你想成为iPhone的目标,你可以尝试使用几个可用的查询,并将值专门设置为iPhone规格。

iPhone 5会是这样的:

@media screen
and (-webkit-min-device-pixel-ratio : 2)
and (device-aspect-ratio : 40/71)
and (device-height : 568px)
and (device-width : 320px)

您可以转到该设备上的页面http://pieroxy.net/blog/pages/css-media-queries/test-features.html来测试不同设备的媒体查询。我得到的唯一奇怪的结果是它没有为iPhone 5返回resolution值。但是,如果上述查询针对除iPhone 5以外的任何内容,我会感到惊讶。(抱歉,我不知道)了解有关解决问题的更多细节,以回答您的第二个问题。)

更多信息: