90%移动端媒体查询失效源于viewport meta标签错误或位置不当，必须确保其正确书写、置于head最顶部且在样式前；css语法错误、html结构问题及样式优先级冲突也会导致失效。
viewport meta 标签没写对或位置错了
媒体查询在移动端不生效，90% 是因为 <meta name="viewport"> 缺失、拼错、放错位置，或者属性不全。没有它，移动浏览器会用桌面宽度（比如 980px）渲染页面，@media (max-width: 768px) 永远不会触发。
必须确保：
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">出现在最顶部，且在所有<style></style>和<link rel="stylesheet">之前 - 拼写不能错：
name="viewpoint"（少一个 p）、content="width=device"（漏-width）、content="width=320"（固定像素值）都会失效 - 真机调试时运行
document.documentElement.clientWidth：如果返回 980 或远大于设备逻辑宽度（如 390/414），说明 viewport 没生效 - Next.js、UniApp 等框架可能自动生成 viewport，你再手动加一条，后加载的会覆盖前一个——查最终 HTML 源码确认只有一条且内容正确
@media 语法写错导致整条规则被忽略
CSS 对媒体查询语法极其严格，一个字符错，整块规则直接被丢弃，控制台也不报错，你只会看到“没反应”。
常见错误：
- 漏
and：@media screen (max-width: 768px)❌；必须是@media screen and (max-width: 768px)✅ - 拼写错误：
max-with（不是max-width）、min-hieght（不是min-height） - 空格缺失：
@media only screenand(max-width: 768px)❌（screenand被当非法类型）；应为@media only screen and (max-width: 768px)✅ - 括号不匹配或单位遗漏：
(width: 768)❌（缺单位）；(width: 768px)✅
HTML 结构错误让媒体查询作用对象“不存在”
媒体查询样式再对，也得有合法 DOM 节点才能生效。HTML 语法错误（比如标签未闭合、属性值缺引号）会破坏 DOM 解析，导致后续元素无法被识别。
典型例子：
-
href="tel+"缺少闭合引号，且tel+本身非法（应为href="tel:+1234567890"） <div class="Footer"> 因前面某处标签未闭合，实际未被浏览器解析为有效节点 <li>使用开发者工具检查元素：如果目标元素在 Elements 面板里显示为灰色、嵌套异常，或根本找不到，大概率是 HTML 结构崩了</li> <h3>样式被更高优先级规则覆盖</h3> <p>媒体查询“跑起来了”，但样式没体现出来，大概率是 CSS 层叠机制在起作用——不是断点没触发，而是你的规则被干掉了。</p> <p>排查方法：</p> <ul> <li>打开开发者工具的 “Computed” 面板，看目标属性最终来自哪条规则</li> <li>检查是否用了 <code>ID选择器、内联样式或!important干扰了媒体查询内的声明- 避免在媒体查询里写过于宽泛的选择器，比如
div p容易被更精确的.content p覆盖 - 注意书写顺序：同优先级下，后写的媒体查询覆盖先写的；断点重叠时（如
max-width: 768px和min-width: 768px），后者可能覆盖前者
document.documentElement.clientWidth 返回的是设备真实逻辑宽度。
