根本原因是 viewport 未正确配置，导致浏览器未按设备真实宽度渲染；必须在 head 中添加 <meta name="viewport" content="width=device-width, initial-scale=1.0">，并避免常见错误如缺失 initial-scale、滥用 user-scalable=no、content 属性格式不规范等。
页面一打开就缩成一团，根本原因是 viewport 没配对
不是 CSS 写错了，是浏览器压根没按手机真实宽度渲染。它默认用 980px 宽度画完再缩放，文字小、按钮挤、媒体查询全失效。
必须在 <head> 里加这行：<meta name="viewport" content="width=device-width, initial-scale=1.0">
- 缺
initial-scale=1.0：iOS Safari 会强制缩放，字体糊成一片 - 写
user-scalable=no：禁用缩放，违反无障碍规范，部分安卓浏览器还会触发兼容模式 - 把
content属性写成多行或带空格（如content=" width=device-width "）：某些旧版 WebView 直接忽略整条 meta
媒体查询写了却没生效，检查断点和单位逻辑
常见现象：改了 @media (min-width: 768px)，但 iPad 上还是走移动端样式——不是代码没加载，是断点选错了。
- 别硬套“iPhone 宽度是 375px”：实际要测
visualViewport.width，尤其双屏设备展开后可能达 2200px，但高度仅 800px - 用
min-width而非max-width做移动优先：先写基础样式（小屏），再用@media (min-width: 768px)覆盖平板，避免样式层叠冲突 - 避免在媒体查询里写
px固定宽高：比如width: 320px在 DPR=3 的 iPhone 上会超出视口，改用%、rem或clamp(320px, 100%, 1200px)
表格在手机上横向溢出，table-layout: fixed 是关键
默认表格按内容撑开列宽，小屏上直接冲出屏幕。靠 overflow-x: auto 包一层只是掩耳盗铃，用户得左右拖，体验差。
立即学习“前端免费学习笔记（深入）”；
- 给
<table>加table-layout: fixed+width: 100% - 为每列
<th>或<td>显式设百分比宽，比如th:nth-child(1) { width: 25% }，总和必须为 100% - 删掉所有
float、position: absolute，它们在table-layout: fixed下行为不可控 - 字体别用
16px死值，配合html { font-size: calc(16px * (100vw / 375)); }动态缩放
双屏设备折叠/展开时布局卡住，别等 resize 事件
华为 Mate X、三星 Fold 这类设备切换形态时，window.innerWidth 延迟更新或跳变，只监听 resize 会错过关键帧。
- 同时监听
orientationchange、screen.orientation和visualViewport - 优先用
visualViewport.width判断当前可视区域，它比window.innerWidth更早响应折叠动画 - 导航栏别写
flex: 0 0 120px，换成flex: 1 1 minmax(80px, auto)，允许收缩但保点击区域 - 禁用
white-space: nowrap，改用text-overflow: ellipsis+min-width: 0防文本撑爆
真机调试比模拟器可靠得多。Chrome DevTools 的设备模拟不触发 Safari 的缩放策略，也绕不开微信内置浏览器的 UA 拦截。错位常在真机上才暴露，尤其是键盘弹起时 position: fixed 元素被顶飞、transform: scale() 触发独立图层导致 z-index 失效这类问题。
