手机浏览器中max-width媒体查询失效问题求助

问题概况 #

• 媒体查询在桌面浏览器调整窗口大小时正常工作，但手机浏览器中完全失效
• 移除媒体查询包裹后，样式属性在手机上可正常生效
• 已正确添加viewport元标签：

<meta name="viewport" content="width=device-width, initial-scale=1">

现有代码示例 #

失效的媒体查询代码 #

@media screen and (max-width: 800px) {
    .i1 {
        width: calc(100vw - 14px);
        height: 50vw;
    }
    .i2 {
        width: calc(100vw - 28px);
        height: calc(50vw - 14px);
    }
}
@media screen and (max-width: 400px) {
    .i1{
        width: calc(100vw - 14px);
        height: calc(100vh - 67px);
    }
    .i2 {
        width: calc(100vw - 28px);
        height: calc(100vh - 82px);
    }
}

...

@media screen and (max-width: 800px) {
    .j1 {
        width: calc(100vw - 14px);
        height: 50vw;
    }
    .j2 {
        width: calc(100vw - 28px);
        height: calc(50vw - 14px);
    }
}
@media screen and (max-width: 400px) {
    .j1{
        width: calc(100vw - 14px);
        height: calc(100vh - 67px);
    }
    .j2 {
        width: calc(100vw - 28px);
        height: calc(100vh - 82px);
    }
}

移除媒体查询后生效的代码 #

/*@media screen and (max-width: 800px) {*/
    .i1 {
        width: calc(100vw - 14px);
        height: 50vw;
    }
    .i2 {
        width: calc(100vw - 28px);
        height: calc(50vw - 14px);
    }
/*}*/

已尝试的操作 #

• 替换为@media only screen and (max-width: 800px)
• 替换为@media only screen and (max-device-width: 800px)
• 每次测试前清理浏览器缓存

解决建议 #

1. 排查CSS语法错误：检查媒体查询代码块之外的CSS是否存在未闭合的括号、遗漏分号等问题，这类语法错误可能导致浏览器忽略后续的媒体查询规则
2. 验证设备逻辑宽度：部分高分辨率手机的逻辑CSS像素宽度可能高于800px，可在页面中添加console.log(window.innerWidth)查看实际值，确认是否命中媒体查询条件
3. 调整媒体查询顺序：确保更窄屏幕的查询（如max-width:400px）写在更宽屏幕的查询（max-width:800px）之后，避免被优先级更低的规则覆盖
4. 简化查询条件：暂时移除screen限定符，使用@media (max-width: 800px)测试，部分移动浏览器可能对限定符的解析存在差异
5. 检查样式优先级：通过浏览器开发者工具查看元素的计算样式，确认媒体查询内的样式是否被内联样式、带!important的样式等更高优先级规则覆盖

内容的提问来源于stack exchange，提问作者user23204753