媒體查詢不適用於Android版Chrome

Question

我已經為dpi大於200的平板電腦寫了一個媒體查詢。它必須使用的平板電腦是Samsung Galaxy Tab S 10.5。 我正在嘗試使用1種媒體查詢來訪問iPad視網膜和Samsung Tab S，但是不幸的是，它並沒有達到我的嘗試。

@media screen (device-pixel-ratio: 2) and (-webkit-device-pixel-ratio: 2) {
    body {font-size: 20px; }
    .padding-n { padding: 10px; }
    .button{ color: red; }

    /*table alternate row color for iPad*/
    .white-table > table tr:nth-child(2n) { background: #edf4f7;} 
}

此查詢在標准的Android瀏覽器中有效，但在Android的Chrome瀏覽器中無效。 在iPad上，它也可以正常工作。

有沒有人解決這個問題？

Answer 1

我看過這樣

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { 
    /* Retina-specific stuff here */
}

因此，您將是：

@media (device-pixel-ratio: 2), (-webkit-device-pixel-ratio: 2) {
    ...
}

要么

@media screen and (device-pixel-ratio: 2), screen and (-webkit-device-pixel-ratio: 2) {
    ...
}

我認為您的示例存在的問題是AND的使用AND這意味着(device-pixel-ratio: 2)和(-webkit-device-pixel-ratio: 2)都必須為真。 使用逗號會將其轉換為OR 。