Android浏览器打破分辨率的CSS媒体查询

Question

在媒体查询中，Android浏览器似乎不支持（并在使用时中断）min-resolution。我已经阅读了一些建议将它用于Android的网站，所以我有点困惑为什么它会破坏我的网站。

这有效（但也适用于Android Chrome，这对我的网站有害）：

@media (-webkit-min-device-pixel-ratio:1.5) and (-webkit-max-device-pixel-ratio:1.5) { ... }

这不包括Chrome，但也违反了默认浏览器：

@media (-webkit-min-device-pixel-ratio:1.5) and (-webkit-max-device-pixel-ratio:1.5) and (min-resolution: 144dpi) { ... }

即使将其设为1dpi也会产生同样的效果。

有什么想法吗？

Answer 1

各种浏览器都有供应商前缀。我在许多网站上使用了以下示例而没有问题。并非我包含min-width条件，以防您需要组合多个查询：

@media (min-width: 480px) and (-webkit-min-device-pixel-ratio: 1.5),
   (min-width: 480px) and (-moz-min-device-pixel-ratio: 1.5),
   (min-width: 480px) and (min-device-pixel-ratio : 1.5) {
 /* ... Styles ... */
}