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

【问题标题】：CSS media feature "resolution" defining pixel density?CSS媒体功能“分辨率”定义像素密度？
【发布时间】：2014-03-11 06:56:11
【问题描述】：

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

例如960px x 640px（适用于 iPhone 4）

但据我了解，这在媒体查询中使用起来有点盗用，至少，分辨率表示输出设备的像素密度。

我可以确认媒体特征“分辨率”本质上是表示像素密度吗？

即显示器的对角线像素分辨率除以对角线尺寸（英寸）

那么，再以 iPhone 4 为例，分辨率定义为330 ppi? （或330dpi）

我很想知道分辨率功能是否可用于定位具有特定像素密度的设备。

在布赖恩·勒波尔的 article 他建议移动设备将实际 dpi 值四舍五入为“120 DPI 用于低密度屏幕，160 DPI 用于中等密度屏幕，240 DPI 用于高密度，最后是 320 DPI 用于超高密度”。

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

即

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

和

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

最终都将被视为 /rounded to

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

【问题讨论】：

您是否尝试检测视网膜显示。然后以@media screen 和 (min-device-pixel-ratio: 1.5) 为例。基本上，您定位 dpi 的目的是什么？
目的最初是针对 IOS 用户的横幅（在电子邮件中）。我读过一些涉及设备宽度的方法；设备高度； device-pixel-ratio 等，但它们似乎都可能捕捉到其他一些设备。在这种情况下，这不是一场灾难，但分辨率似乎是另一个可能有助于进一步隔离的参数。我也很想弄清楚分辨率功能是如何工作的。
对于媒体查询，您不能按名称定位特定设备。你可以定位宽度和东西，但就像你说的，这将包括其他设备。如果你只需要iOS，那么也许你需要研究一下js。
此外，谁能告诉我们未来会怎样，如果您针对特定的 dpi，将来可能会有相同 dpi 的设备出现，您需要重新审视这个
谢谢！是的，我知道我不能专门针对设备。因此，我想使用所有/任何可用的媒体功能来尝试狭窄的事情。唉 js + email 也不是很好的组合

标签： css media-queries resolution

【解决方案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 以外的任何东西，我会感到惊讶。（对不起，我不知道更多有关解决第二个问题的详细信息。）

更多信息请访问：

【讨论】：

谢谢！这些链接很有帮助。我在 webkit 对解决方案的支持上读到了相互矛盾的东西。 this article 建议 webkit 带头支持分辨率。 Mozzilla pages 建议缺乏支持。分辨率似乎并不直接等同于设备像素比，因为它是一个相对于以英寸为单位的屏幕尺寸的数字。因此，您可以结合设备高度和宽度来解释有关设备的更多信息。