移动端布局错位八成因viewport缺失或参数不全：必须在顶部写全，否则浏览器默认980px缩放渲染，导致尺寸失真、max-width失效。
移动端布局错位，八成不是 CSS 写错了，而是浏览器压根没按你期望的宽度渲染——先检查 <meta name="viewport"> 是否存在且参数完整。
viewport 元标签漏写或参数不全
这是最常被跳过的一步。没有它，iOS Safari 和多数安卓浏览器会默认用 980px 宽度渲染，再整体缩放，导致文字变小、按钮挤在一起、max-width 失效。常见错误包括：
-
<meta name="viewport" content="width=device-width">—— 缺initial-scale=1.0，iOS 会强制缩放 -
<meta name="viewport" content="width=device-width, user-scalable=no">—— 禁用缩放影响可访问性，且部分安卓浏览器会因此忽略 initial-scale - 标签放在
里，或被 JS 动态插入（晚于页面解析）
✅ 正确写法（必须放在 最顶部）：
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
注意：maximum-scale=1.0 可加但慎用；minimum-scale 和 user-scalable=no 除非是游戏画布等强交互约束场景，否则不要加。
立即学习“前端免费学习笔记（深入）”；
flex 布局中子元素意外脱离文档流
桌面端看着正常，一到手机就整体右移或内容上浮？很可能是 position: absolute 或 float 在 flex 容器里“失效”又“捣乱”。比如：
- 父容器设了
display: flex，子元素却写了float: left—— flex 下float无效，但可能干扰justify-content计算 -
position: absolute的子元素没指定top/left，或其最近非static祖先不是你预期的那个容器 - 用了
transform: translateX(-138px)这类固定像素偏移 —— 屏幕一变，偏移就错
✅ 解法：删掉所有对齐相关的硬编码值，改用 left: 0 + width: 100%（对下拉菜单），或用 align-items: center / justify-content: center 控制位置。真要偏移，用 calc(50% - var(--icon-width)/2) 这类相对计算。
固定像素单位（px）在小屏上撑破容器
写了 width: 375px、padding: 24px、font-size: 16px，在 iPhone SE 上大概率溢出。这不是媒体查询没加，而是单位本身就不适配。
-
width: 960px→ 改为width: 90%; max-width: 960px -
margin: 0 20px→ 改为margin: 0 1rem或margin: 0 5vw -
font-size: 16px→ 改为font-size: 1rem，并配合根字体动态调整（如html { font-size: clamp(14px, 4vw, 18px); }）
⚠️ 特别注意：height: 500px 这类固定高是重灾区——它会截断内容、撑开视口、导致页脚悬空。优先用 min-height 或直接交由内容撑开。
真机调试时才发现的隐藏问题
Chrome DevTools 模拟器能骗过眼睛，骗不过 Safari 的缩放策略、微信内置浏览器的 UA 拦截、甚至某些厂商浏览器的私有渲染逻辑。几个典型真机才暴露的问题：
- 键盘弹出后，
position: fixed导航栏被顶起，或input聚焦时页面滚动异常 -
overflow: hidden盖住了本该显示的内容（比如轮播图指示器） -
transform: scale()触发了独立图层，让z-index行为和预期不一致 - 安卓端
vh单位在地址栏收起/展开时会跳变（可用dvh替代，但注意兼容性）
调试建议：Android 用 chrome://inspect 连真机；iOS 必须用 Mac + Safari 开发菜单 → iOS 设备名 → 检查网页。重点看盒模型是否被截断、定位是否依赖了错误的祖先节点、以及滚动容器有没有意外触发 overscroll-behavior。
真正卡住人的，往往不是某个属性不会写，而是 viewport 没生效时还在调 margin，或者 flex 容器里混着 absolute 却以为它归 align-items 管——排查顺序比技巧更重要。
