媒体查询在移动端失效主因是viewport标签未生效或@media语法错误：viewport必须唯一、紧贴开头且位置正确；@media需严格遵循语法规范，如screen and (max-width: 768px)，漏空格、拼写错、单位缺、括号不全均导致整条规则被静默丢弃。
媒体查询在移动端断点切换时失效，90% 不是 CSS 写错了，而是 viewport 标签没起作用或 @media 语法有硬伤——浏览器静默丢弃整条规则，你根本看不到报错。
viewport 标签没生效，断点就永远不触发
移动端浏览器默认用 980px 宽度渲染页面，@media (max-width: 768px) 自然不会匹配。必须确保：
-
<meta name="viewport" content="width=device-width, initial-scale=1">紧贴开始标签，前面不能有 JS、注释、Blade@section占位符 - 它必须在所有
<style></style>和<link rel="stylesheet">之前 - 整个 HTML 中只能有一条——Next.js、UniApp 或 CMS 可能悄悄注入第二条，后加载的会覆盖你写的那条
- 真机调试时运行
document.documentElement.clientWidth：返回值是 980、1024 或远大于设备逻辑宽度（如 390、414），说明viewport完全失效
@media 语法错一个字符，整块规则就被丢弃
浏览器不报错，DevTools 的 Styles 面板里这条规则直接不显示，或呈灰色不可编辑。高频出错点：
- 漏
and：@media screen (max-width: 768px)❌ → 必须是@media screen and (max-width: 768px)✅ - 拼写错误：
max-with、min-hieght、screenand（缺空格）都无效 - 单位缺失：
(max-width: 768)❌ → 必须是(max-width: 768px)✅ - 括号不闭合：
@media (max-width: 768px {❌（右括号漏了）
断点顺序和选择器权重让样式“看起来没生效”
媒体查询规则其实触发了，但被更高优先级样式覆盖。关键排查方式：
- 用 DevTools 选中目标元素 → 看「Computed」面板里对应属性最终来自哪条规则，而不是只盯「Styles」里有没有那条
@media - 检查是否用了 ID 选择器、内联样式或
!important干扰了媒体查询内的声明 - 避免写宽泛选择器：
div p容易被更精确的.content p覆盖 - 断点书写顺序要由小到大：
@media (max-width: 480px)、@media (min-width: 481px) and (max-width: 768px)，否则后写的会覆盖前写的
平板和老旧安卓机上特别容易栽跟头
iPad、安卓 4.x–5.x WebView 对 viewport 和媒体特性极其敏感：
- 别用已弃用的
max-device-width，它不响应分屏、缩放、横竖屏切换；一律改用max-width - iPad Pro 11 英寸逻辑宽度是 834px，只写
max-width: 768px会漏掉大量真实场景 - 安卓旧 WebView 有时无视
initial-scale=1.0，可临时加minimum-scale=1.0, maximum-scale=1.0测试，但不要长期依赖 -
orientation查询不是旋转瞬间就切换，它依赖重排完成，且只在逻辑宽度 > 高度时才匹配landscape
最隐蔽的问题往往藏在 HTML 源码第一行——打开真机「查看网页源代码」，确认 viewport 是唯一、位置正确、拼写无误的那一条。语法和顺序问题，浏览器从不提醒，只默默跳过。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
