android - Chrome Android 只考虑一个媒体查询

Question

我实际上遇到了 Chrome Android 上的媒体查询问题。我有一个文件 (mobile.css)，其中包含页眉和页脚的移动设计。该文件在每个页面中导入，其中的媒体查询如下:

@media screen and (max-width: 980px) {
    /* some code */
}

然后我网站的每个页面都有其适当的 css 文件，其中包含与此页面相关的移动设计，媒体查询与 mobile.css 文件中的相同。

此代码在桌面版 Chrome 和 Firefox 以及 Firefox Android 上运行良好，但在 Chrome Android 上根本无法运行，我不明白为什么。

更新

我将其中一个媒体查询更改为:

@media screen and (max-width: 981px) {
    /* some code */
}

并且有效。显然，当有两个相同的查询时，Chrome Android 不喜欢......它不是很优雅，但它有效。

Answer 1

我将其中一个媒体查询更改为:

@media screen and (max-width: 981px) {
    /* some code */
}

并且有效。显然，当有两个相同的查询时，Chrome Android 不喜欢......它不是很优雅，但它有效。