必须同时声明 width: 90% 和 max-width: 480px，并配合 margin: 20px auto 居中，再为 img、video 设 max-width: 100%、height: auto，长文本加 word-break: break-word，弹窗容器设 overflow: hidden 且父级需有明确宽度约束，Flex/Grid 子项须显式设 min-width: 0。
直接写 width: 500px 就会超出 iPhone SE（375px 宽）——解决方法不是加 overflow: hidden，而是从宽度约束链源头切断溢出可能。
用 width + max-width 组合替代固定值
单独 width: 90% 在大屏上太窄，只写 max-width: 480px 在小屏上无效。必须同时声明：
-
width: 90%—— 确保小屏有足够内边距，不贴边 -
max-width: 480px—— 防止 iPad 横屏或大安卓屏撑开过宽 -
margin: 20px auto—— 居中且避免右侧被裁切（别用margin: auto，上下边距会失控）
弹窗内部元素必须同步收缩
哪怕外层设了 width: 90%，里面一张没约束的图片、一个长 URL 或一段没换行的英文，照样破框。关键控制点：
-
img、video必须加max-width: 100%和height: auto - 长文本块加
word-break: break-word（或overflow-wrap: break-word） - 表单
input、textarea要显式设width: 100%，否则默认宽度会撑破父容器 - 弹窗容器本身加
overflow: hidden，但仅当它有明确width时才真正生效
移动端专属断点别只靠 max-width: 768px
这个值对 iPad 竖屏有效，但对 iPhone 15 Pro（393px）、折叠屏窄态（比如 280px）完全不够。更准的写法是：
立即学习“前端免费学习笔记（深入）”；
- 主断点用
@media (max-width: 480px)—— 覆盖绝大多数手机窄屏 - 补一条
@media (hover: none) and (pointer: coarse)—— 捕获触控设备，比查宽度更可靠 - 在该断点里调小
padding（比如从30px→16px）、font-size（标题从24px→18px），避免文字挤出或按钮过高
transform: translate(-50%, -50%) 在 iOS 上错位怎么办
这不是 bug，是 Safari 对 position: absolute + transform 的渲染优化导致定位原点偏移。真机必现，模拟器测不出：
- 给弹窗加
will-change: transform或transform: translateZ(0)强制硬件加速 - 避免遮罩层和弹窗同时用
overflow: hidden+transform，Safari 容易裁剪错位 - 键盘唤起场景下，改用
top: max(50vh, 50%)+transform: translateY(-50%)，用视口单位兜底 - 务必用真机连 Safari Web Inspector 调试，别信 DevTools 模拟结果
最易忽略的点：溢出从来不是单个属性的问题，而是宽度约束在父子层级间断掉了——尤其当用了 Flex/Grid，子项默认 min-width: auto，会拒绝收缩，必须手动加 min-width: 0 才能真正响应 max-width。
