媒体查询不适用于 Android 版 Chrome

【问题标题】：Media query doesn't work on Chrome for Android媒体查询不适用于 Android 版 Chrome
【发布时间】：2014-11-10 04:42:44
【问题描述】：

我为 dpi 高于 200 的平板电脑编写了媒体查询。它必须使用的平板电脑是三星 Galaxy Tab S 10.5。我正在尝试使用 1 个媒体查询来访问 iPad Retina 和三星 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 上也可以正常工作。

有没有人解决这个问题？

【问题讨论】：

不确定，但你可以试试这个：@media screen and (min-device-pixel-ratio: 2) and (-webkit-min-device-pixel-ratio: 2) { .. . } 如果你不使用 min，它必须正好是 2 才能工作。你也应该在屏幕之后使用“and”。
不幸的是，这不起作用..奇怪的是媒体查询在 iPad 上运行良好，也在默认的 Android 浏览器上运行，但在 FF 和 Chrome 中却不行。

标签： android css google-chrome media-queries

【解决方案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 的使用，这意味着(device-pixel-ratio: 2) 和(-webkit-device-pixel-ratio: 2) 都必须为真。使用逗号将其转换为OR。

【讨论】：