viewport meta 标签未正确配置或位置错误是移动端媒体查询失效的主因，必须置于 head 最顶部、内容为 width=device-width 且无重复，否则浏览器以 980px 默认宽度渲染导致断点不匹配。
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">之前 - 不能写成
width=320、width=375这类固定值——这会让max-width断点彻底失效 - 避免重复注入：Next.js、UniApp 等框架可能自动生成一条，你再手动加一条，后加载的会覆盖前一个；查最终 HTML 源码确认只有一条且内容正确
真机调试时运行 document.documentElement.clientWidth，返回值是 980 或远大于设备逻辑宽度（如 390/414），就说明 viewport 完全没起作用。
@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)✅
样式被更高特异性规则覆盖
媒体查询“触发了”，但样式没体现出来，大概率是 CSS 层叠机制在起作用——不是断点没跑，而是你的声明被干掉了。
打开 DevTools → 选中目标元素 → 看对应属性旁有没有横线划掉：有，说明被其他规则覆盖。
- 别急着加
!important：它只是临时探针，掩盖真实问题，且 Safari 中因解析顺序可能导致行为异常 - 提升选择器特异性更可靠：比如把
.nav-link改成.header .nav-link，或确保媒体查询内选择器与 HTML 结构完全一致（比如用body而不是.body） - 注意书写顺序：媒体查询块必须放在基础样式之后；否则同权重下，后声明的规则会覆盖前面的
安卓 WebView 和 iOS 旧版对 orientation 等特性解析不稳定
Android 4.4 WebView 和 iOS 9–11 虽支持 @media 基础语法，但对某些媒体特性解析不可靠：
-
(orientation: landscape)在 Android 4.4 WebView 中常返回错值，建议改用(min-aspect-ratio: 1/1)辅助判断 -
(hover: hover)在 iOS 9–11 的 Safari 中始终返回false，不能用于检测“是否触屏设备” -
resolution、scripting等特性在所有旧版移动浏览器中基本不可靠，应避免使用
实操建议：只依赖 width、min-width、max-width 和 device-width，它们在 Android 4.0+ / iOS 6+ 全系稳定。
最隐蔽的问题往往不在代码里，而在 viewport 标签是否真正生效——它不报错、不警告，只默默让所有断点失效。真机上跑一遍 document.documentElement.clientWidth，比看十遍 CSS 更快定位根源。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
