媒体查询不适用于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 。