排版混乱主因是浏览器放弃预期渲染逻辑：首查viewport是否生效（缺失则按980px渲染，致媒体查询等全部失效），次查HTML结构是否被自动修正（如非法嵌套引发DOM重写），再查盒模型与布局上下文冲突（如浮动未清除、绝对定位无定位祖先）。
排版混乱不是“样式没写对”，而是浏览器在特定条件下放弃了你预期的渲染逻辑。先确认 viewport 是否生效，再查 HTML 结构是否被浏览器悄悄修正，最后看盒模型和布局上下文是否冲突。
viewport 元标签缺失或 content 值不规范
这是移动端排版错乱的第一道关卡。没有它，浏览器就按 980px 渲染，所有媒体查询、rem 计算、flex 换行都失效。
- 必须写在
<head>内，且只出现一次；重复或位置错误会导致部分浏览器忽略 -
content="width=device-width, initial-scale=1.0"是底线配置；缺initial-scale=1.0时 iOS Safari 会强制缩放，字体糊、按钮小、点击区域漂移 - 避免
user-scalable=no：不仅违反无障碍要求，某些安卓 WebView 会因此降级到兼容模式，flex 和 grid 行为异常 - content 属性值不能换行或首尾带空格：
content=" width=device-width "在旧版 UC、QQ 浏览器内核中整条被忽略
HTML 结构被浏览器自动修正导致 DOM 崩坏
你写的结构 ≠ 实际渲染的 DOM。浏览器遇到非法嵌套（比如 <p> 里塞 <div>），会立刻闭合 <p>，把后续内容扔到外面——父容器根本包不住子元素。
- 用 DevTools 右键父容器 → “Edit as HTML”，删一个字符再回车：如果子结构整体跳出去，说明原始结构已被重写
- 在 Console 执行
document.body.innerHTML，和本地源码逐行比对；多出的</p>、消失的<section>都是线索 - W3C Validator 会直接报错：
Element div not allowed as child of element p——这类必须优先修复，不是“能跑就行” - 语义化替换后样式丢失？不是标签不兼容，是你还写着
.header { ... }，而新<header>根本没命中
盒模型与布局上下文冲突引发的视觉错位
浮动未清除、position: absolute 脱离文档流、flex 容器里混用 float，都会让元素“看起来在那儿，其实不在那儿”。
立即学习“前端免费学习笔记（深入）”；
- 父容器高度为 0 但子元素可见？大概率是浮动子元素未清除；临时加
overflow: hidden或display: flow-root看是否恢复高度 - flex 容器中给子项设
float：该属性无效，还会干扰justify-content对齐，直接删掉 - 绝对定位元素位置漂移？检查其最近的非
static定位祖先是否存在；没有的话，它就相对视口定位，不受父容器约束 - 用
outline快速暴露问题：document.head.innerHTML += '<style>*{outline:1px solid red!important;}</style>'，红色轮廓不占空间，能一眼揪出撑破容器的<div>或错位的<img>
媒体查询断点与单位选择失当
断点不是“iPhone 就是 375px”，单位也不是“px 就是死值”。错用会直接导致响应式逻辑断裂。
- 别硬套设备宽度：双屏设备展开后
visualViewport.width可达 2200px，但高度仅 800px；优先用visualViewport.width判断，比window.innerWidth更早响应折叠动画 - 用
min-width做移动优先：先写小屏基础样式，再用@media (min-width: 768px)覆盖平板，避免层叠冲突 - 禁用固定 px 宽高：比如
width: 320px在 DPR=3 的 iPhone 上会超出视口；改用%、rem或clamp(320px, 100%, 1200px) - 表格横向溢出？光靠
overflow-x: auto包一层是掩耳盗铃；必须配table-layout: fixed+width: 100%，再给每列显式设百分比宽（如th:nth-child(1) { width: 25% }）
真正难调的从来不是 CSS 规则本身，而是浏览器在解析 HTML 时做的那些“为你好”的自动修正，以及不同上下文（flex/grid/position）之间不可见的规则覆盖。动手前先看一眼 document.body.innerHTML 和 visualViewport，比调十遍 margin 都管用。
