合理移动端max-width应设为max-width: 100vw; max-width: 750px双保险，配合viewport标签和box-sizing: border-box全局重置，确保小屏自适应、大屏不溢出、居中有效且可访问。
max-width 设置多少才合理
移动端内容宽度不能只写 max-width: 100%，那等于没设——它会让容器随父级撑开，起不到“限制”作用。真正起效的是给一个具体像素值，比如 max-width: 750px 或 max-width: 375px，取决于设计稿基准（常见是 375px 宽的 iPhone 屏）。但别硬写死 375px，否则在 iPad 或折叠屏上会留大片空白。
- 推荐用
max-width: 100vw配合max-width: 750px双保险：小屏按视口宽，大屏卡死在 750px - 如果项目支持高清屏（@2x/@3x），优先用
rem或em，比如max-width: 37.5rem（假设 1rem = 10px） - 避免用
%单独控制，它依赖父容器宽度，而很多移动端布局中父容器本身没设宽，结果就是失效
margin: 0 auto 为什么有时不居中
margin: 0 auto 要生效，元素必须是块级且有明确宽度（或 max-width），否则浏览器无法计算左右空余。移动端常见失效场景是父容器用了 display: flex 或 display: grid，此时 margin: 0 auto 会被忽略。
- 检查父元素是否意外启用了 Flex 布局；如果是，改用
justify-content: center - 确保目标元素没有设置
float或position: absolute，这两者会让margin: 0 auto失效 - 在 iOS Safari 中，如果父容器有
overflow: hidden且子元素有transform，也可能导致居中偏移，可加will-change: transform缓解
配合 viewport 的必要性
不配 <meta name="viewport" content="width=device-width, initial-scale=1">，max-width 在移动端基本等于摆设。因为默认视口宽度是 980px 左右，你设 max-width: 375px，它照样按 980px 渲染，只是内容被压缩进窄区，体验极差。
- 必须把 viewport 标签放在
<head>最前面，否则部分 Android 浏览器会先渲染再重排 - 不要加
user-scalable=no，它会让视力障碍用户无法缩放，也违反 WCAG 可访问性要求 - 如果业务强依赖固定缩放（如某些 H5 游戏），至少保留
maximum-scale=1，而非禁用缩放
内边距和滚动条的隐藏宽度陷阱
写了 max-width: 375px; margin: 0 auto，看起来居中了，但一滚动就发现右边有隐藏滚动条或内容溢出——这是因为 padding 和 border 默认不计入 width，而 box-sizing 默认是 content-box。
立即学习“前端免费学习笔记（深入）”；
- 统一加全局重置：
* { box-sizing: border-box; }，否则每个容器都要手动设 - 如果容器内部有
padding，且希望内容区域严格对齐 375px，那就得把max-width减去左右 padding 值，比如padding: 0 20px，则max-width: 335px - iOS Safari 在横屏时可能因地址栏收起导致视口高度突变，间接影响宽度计算，此时
max-width: 100vw比固定值更稳
实际写的时候，最常漏的是 box-sizing: border-box 和 viewport 标签顺序。这两个点不处理，其他都调对了，上线后还是偏移或溢出。
