移动端布局错位主因是viewport失效或媒体查询误用，需先确保meta viewport正确，再按尺寸而非方向设断点，移动优先并重构核心布局结构。
移动端布局错位不是CSS写错了，而是PC端规则直接跑到了小屏上——@media 不是用来“微调”的，是重写布局流的开关。
先确认错位是不是由 viewport 失效导致
很多所谓“媒体查询没生效”，其实是 <meta name="viewport"> 缺失或写错，浏览器压根没进响应式渲染模式。检查三点：
-
width=device-width必须存在，不能写成width=375或其他固定值 -
initial-scale=1.0必须显式声明，且不能被maximum-scale=1或user-scalable=no干扰（后者可加，但前两者不能共存） - 该标签必须在
<head>最顶部，Laravel 项目中要确认app.blade.php没被中间件过滤或覆盖
真机上 document.documentElement.clientWidth 如果远小于 window.screen.width，基本就是 viewport 被缩放了，@media 再多也白搭。
用 @media (max-width: 768px) 替代 @media (orientation: landscape)
单纯监听 orientation 在折叠屏、键盘弹出、系统UI下拉时极易误判，iOS Safari 加载瞬间还可能拿不到方向。更稳的方式是按实际尺寸断点：
立即学习“前端免费学习笔记（深入）”；
- 优先用
@media (max-width: 768px)：覆盖所有手机+小平板，兼容性好，无需 JS 辅助 - 横屏专项处理别只靠
orientation，改用@media (max-height: 480px) and (min-width: 640px)—— 这个组合能准确捕获 iPhone 横屏（~390px 高）、折叠屏半开等真实窄高场景 - 避免
@media (max-width: 375px)这类过细断点，除非你真有 iPhone SE 专属逻辑；多数情况 768px 就够用
注意：不要把所有样式都塞进 media query 里，先写移动端基础样式（移动优先），再用 @media (min-width: 769px) 增强 PC 端。
重设布局结构，不是调 margin/padding
错位常源于三类高危结构没做流式重构：
- 导航栏：PC 的
display: flex; flex-direction: row到手机必须改成flex-direction: column或收进position: absolute汉堡菜单，不能只 hide/show - 网格区：如
grid-template-columns: 1fr 3fr 1fr，手机端必须显式重写为1fr，否则子项会因容器变窄而换行错位 - 浮动元素：
float: left+width: 50%在小屏下极易因四舍五入或 box-sizing 不一致导致最后一行塌陷，一律改用display: flex; flex-wrap: wrap或grid
关键操作只动核心布局属性：display、flex-direction、grid-template-columns、float；其余如 font-size、padding 用 clamp() 或 rem 微调即可。
真机测试时最易忽略的两个 CSS 行为
模拟器看不出问题，但真机会暴露：
-
flex-basis在 iOS Safari 和 Android WebView 中解析不一致：有的转成auto，有的保留像素值，务必在真机上查 computed 样式确认实际值 -
visualViewport.height在键盘收起瞬间有几十毫秒延迟，若 JS 依赖它动态改样式（比如抬高输入框），必须加setTimeout(() => {}, 50)防抖，否则会闪一下再跳到位
另外，第三方 UI 库（如 Vant）内部用了 position: absolute 或 transform，会脱离 flex 流，此时父容器加 display: flow-root 也救不了——得单独重写该组件的定位逻辑。
