viewport标签未置于head最前会导致平板横屏媒体查询失效，因浏览器默认以980px渲染；正确写法是且位于head内首个或第二个位置。
viewport 标签没放对位置，平板横屏根本不会触发媒体查询
很多页面在 iPad 横屏下仍显示手机样式，根本原因不是 CSS 写得不对，而是 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 没放在 最前面。iOS Safari 会先按约 980px 渲染，等 CSS 加载完才重排，导致 @media 规则压根没执行。
必须确保这行在所有 <link>、<style></style>、<script></script> 之前；用 Chrome DevTools 切换 iPad Pro 横屏模拟器，Elements 面板顶部显示的 viewport width 应为 1024，而不是 980。
- 别加
maximum-scale=1.0或user-scalable=no，否则双指缩放失效，违反可访问性要求 - 拼写必须是
width=device-width，写成device_width或width=deviceWidth就无效 - 旧版 UC/QQ 浏览器对
initial-scale解析不稳定，不要用 JS 依赖它算 rem 基准
@media 断点只写 min-width: 1024px 会漏掉大量真实横屏场景
直接套用 @media (min-width: 1024px) 看似合理，但 Surface Pro 横屏是 1080px，iPad Air 横屏是 1194px，而华为 Mate X5 展开态横屏可能只有 900px 左右——这些设备全被排除在外。更糟的是，用户手动缩放浏览器到 110% 时，视口宽度变成小数（如 1023.5px），min-width: 1024px 就彻底失效。
实际应分层处理：
- 基础断点用
@media (min-width: 768px)覆盖所有竖屏+部分横屏平板 - 再加一层
@media (min-width: 768px) and (orientation: landscape)单独调横屏敏感项（如导航栏高度、表单字段间距） - 对高度敏感区域（如弹窗、登录框），补
@media (max-height: 600px)防止被软键盘顶飞
字体和边距还在用 px，横屏下视觉密度崩坏
横屏平板视口宽但像素密度高，固定 padding: 16px 或 font-size: 16px 会让内容显得稀疏空洞；反之，若只靠 vw（如 font-size: 4.266667vw），iOS Safari 10 以下不支持，且小屏下文字过小。
推荐组合方案：
-
:root { font-size: clamp(14px, 2.5vw, 16px); }—— 兼容老设备，768px 时约 15.2px，1024px 时封顶 16px - 所有
font-size、padding、margin全部改用rem，禁用混用（比如不能同时存在padding: 1rem和padding: 12px） - 容器级间距优先用
gap（display: flex; gap: 1rem;），避免子元素重复设 margin 导致叠加错乱
Flex/Grid 布局在横屏下换行或留白，其实是 flex-basis 设错了
常见错误是写 .item { flex: 0 0 33.33%; } 做三列，结果横屏下因 padding/border 占空间，第三列被迫换行；或者写死 width: 33.33%，缩放后子元素总宽超 100%。
正确做法是让 Flex 主动分配剩余空间：
-
.item { flex: 1 1 280px; min-width: 280px; }—— 允许拉伸收缩，基础宽度 280px，最小不小于 280px - Grid 布局中避免嵌套
display: grid在display: flex容器里，尤其 Android 4.4 WebView 会忽略grid-gap - 横屏卡片网格用
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))，比固定列数更可靠
真正卡住的点往往不在“怎么写”，而在“谁先生效”：viewport 标签位置、CSS 加载顺序、单位混用、以及是否把横屏当成独立维度而非单纯宽度变大。这些细节一旦错位，调试时会发现样式像幽灵一样时有时无。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
