Question

我为dpi高于200的平板电脑编写了媒体查询。它必须使用的平板电脑是三星Galaxy Tab S 10.5。我试图使用1个媒体查询来访问iPad视网膜和三星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浏览器中有效，但在Chrome for Android中无效。在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) {
    ...
}

OR

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

我认为您的示例的问题是使用AND，这意味着(device-pixel-ratio: 2)和(-webkit-device-pixel-ratio: 2)都必须为真。使用逗号将其转换为OR。

媒体查询无法在Android版Chrome上运行

1 个答案: