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 ... */
}