Android瀏覽器在分辨率爲

Question

的CSS媒體查詢中斷Android媒體查詢似乎不支持（並且在使用時會中斷）min-resolution。我已經閱讀了一堆網站建議使用它的Android，所以我有點困惑，爲什麼它打破了我的網站。

此作品（但也適用於Android的瀏覽器是壞我的網站）：

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

這不包括瀏覽器，但斷裂的默認瀏覽器也：

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