-webkit-min-device-pixel-ratio: 2 代表什么？答案

【问题标题】：What does -webkit-min-device-pixel-ratio: 2 stand for?-webkit-min-device-pixel-ratio: 2 代表什么？
【发布时间】：2012-02-25 04:33:31
【问题描述】：

@media only screen and (max-device-width:480px), 
only screen and (-webkit-min-device-pixel-ratio: 2)
{ /*iphone css*/ }

max-device width 有意义，但 pixel ratio 对我来说没有任何意义。谢谢。

【问题讨论】：

这主要用于识别较新的高分辨率mac视网膜显示器。这些屏幕使用内置缩放功能，可能会导致 CSS 无法按预期工作。

标签： iphone css media

【解决方案1】：

来自http://developer.android.com/reference/android/webkit/WebView.html

-webkit-device-pixel-ratio CSS 媒体查询。使用它来指定要使用此样式表的屏幕密度。这对应的值应该是“0.75”、“1”或“1.5”，以表示样式适用于低密度、中密度或高密度屏幕，分别。例如： hdpi.css 样式表仅用于设备屏幕像素比为 1.5，为高密度像素比例。

根据https://developer.mozilla.org/en/CSS/Media_queries

-moz-device-pixel-ratio

给出每个 CSS 像素的设备像素数。

注意：这个媒体功能也被 Webkit 实现为 -webkit 设备像素比率。 Gecko 实现的 min 和 max 前缀被命名为 min--moz-device-pixel-ratio 和 max--moz-device-pixel-ratio;但与实现的前缀相同 Webkit 被命名为 -webkit-min-device-pixel-ratio 和 -webkit-max-device-pixel-ratio.

【讨论】：

谢谢，这很有帮助。我在其他地方读到了关于使用(-webkit-min-device-pixel-ratio:0) 作为浏览器条件 CSS 的黑客。现在有了(min--moz-device-pixel-ratio:0)，样式表可以检测 Gecko/Mozilla 浏览器。其他浏览器也有类似的情况吗？
“我认为 w3c 不支持这个”。为什么会有供应商特定的前缀（-webkit 或 -moz，虽然那里不完全是前缀），这难道不是缺乏 w3c 标准吗？
这是一个很好的查询，可以捕获几乎所有的（高 dpi 设备）：gist.github.com/marcedwards/3446599