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

Question

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

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

- Marin

---

这主要用于识别具有高分辨率的新款Mac Retina显示屏。这些屏幕使用内置缩放功能，可能会导致CSS无法按预期工作。 - toing_toing

Answer 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-device-pixel-ratio。Gecko实现的min和max前缀被命名为min--moz-device-pixel-ratio和max--moz-device-pixel-ratio；但是Webkit实现的相同前缀被命名为-webkit-min-device-pixel-ratio和-webkit-max-device-pixel-ratio。

- j08691

---

谢谢，这非常有帮助。我在 Stack Overflow 上看到了使用 (-webkit-min-device-pixel-ratio:0) 作为浏览器条件 CSS 的技巧。现在有了 (min--moz-device-pixel-ratio:0)，样式表可以检测到 Gecko/Mozilla 浏览器。是否还有其他浏览器类似的方法？ - JohnK

我认为W3C不支持这个。难道缺乏W3C标准就是为什么会有供应商特定的前缀（-webkit或-moz，虽然不完全是前缀）吗？ - Julien Rousseau

这是一个非常好的查询，几乎可以捕捉到所有高DPI设备： https://gist.github.com/marcedwards/3446599 - Frank N