平板媒体查询不生效主因是viewport标签缺失、重复或位置靠后，导致浏览器启用980px默认视口；其次为误用已弃用的max-device-width，应改用响应式更强的max-width，并确保断点覆盖多型号与方向。
平板设备上媒体查询不生效，90% 是因为 viewport 标签缺失或写错位置，剩下 10% 多半卡在 max-device-width 这个已弃用的媒体特性上——它在 iPadOS 16+ 和 macOS Safari 中基本不匹配。
viewport 标签必须唯一且位于
浏览器解析 HTML 是顺序执行的。一旦它在 开头没看到 <meta name="viewport">，就会立刻启用桌面模拟模式（布局视口固定为 980px），此时 @media (max-width: 768px) 永远不会触发。
- 检查源码：右键 → 查看页面源代码，确认
<meta name="viewport" content="width=device-width, initial-scale=1.0">是内第一个或第二个标签（前面只能有<meta charset>或<title></title>） - 禁止 JS 动态插入：
document.head.innerHTML += '...'在 Safari 中基本无效 - Next.js/Nuxt 等框架要注意：服务端模板可能因注释、占位符或 SSR 渲染顺序把 viewport 标签挤到后面，必须验证最终 HTML 源码
- 重复声明时，浏览器只认第一个；CMS 或插件自动注入第二个
viewport，会覆盖你写的
别用 max-device-width，改用 max-width
max-device-width 返回的是设备逻辑像素宽度，不随分屏、缩放、横竖屏切换更新，且已被 W3C 弃用。你在 iPad 上写的 @media (max-device-width: 768px)，在分屏模式下视口只有 400px，这条规则也不会匹配。
- 一律改用
@media (max-width: 768px)——它基于当前视口宽度，可响应缩放、分屏、DevTools 调整 - 注意
initial-scale会影响视口计算：设了initial-scale=0.5，那100vw就等于 2 倍设备宽度，断点值需同步上调 - 不要依赖
device-pixel-ratio做布局判断——它不随缩放重算，也不响应式更新
iPad 断点要覆盖多型号与方向
iPad 不是单一尺寸。老款 iPad 竖屏是 768px，横屏是 1024px；iPad Pro 11 英寸逻辑宽度是 834px，12.9 英寸是 1024px。只写 max-width: 768px 会漏掉大量真实场景。
- 推荐组合写法：
@media only screen and (min-width: 415px) and (max-width: 1024px) - 若需区分横竖屏，叠加
and (orientation: portrait)或and (orientation: landscape) - 避免把媒体查询写在更宽泛的规则之前：CSS 后定义覆盖先定义，
max-width: 1024px的查询应放在max-width: 768px之后，否则会被覆盖
真机调试时最易忽略的 CSS 层叠问题
DevTools 模拟器默认启用标准 viewport 行为，即使你 HTML 里漏了标签，它也会“帮忙补上”。但 iOS Safari、微信内置浏览器等原生环境严格按 HTML 实际内容执行——漏了就是漏了，不会宽容。
- 真机访问时，打开 Safari Web Inspector，检查
document.documentElement.clientWidth是否接近设备逻辑宽度（如 iPad Air 是 820px） - 若显示 980px，基本可断定
viewport未生效 - 用 Elements 面板选中目标元素，看 Styles 面板里你的媒体查询样式是否被划掉；若被划掉，点击左侧箭头展开所有匹配规则，定位被覆盖的源头（常是
element.style或含!important的规则） - 提升选择器特异性比加
!important更可靠，比如把.nav改成.header .nav或body .nav
真正难的从来不是怎么写断点，而是让断点在不同 iPad 型号、不同系统版本、不同分屏状态下都稳定触发——它藏在 width=device-width 的精准配置里，藏在 max-width 对视口的实时响应里，也藏在真机上那一行 clientWidth 的数值里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
