小屏幕 fixed 居中弹窗溢出需协同约束宽度、高度、内边距和内容行为；须用 calc() 或带降级的 clamp() 控制宽度，box-sizing: border-box 防 padding/border 超限，max-height + overflow-y: auto 保滚动，子元素如 img、input、URL 等须单独防溢出。
小屏幕 fixed 居中弹窗溢出，核心不是“居中写错了”，而是宽度、高度、内边距、内容行为四者没协同约束。只靠 top: 50% + transform 或 flex 居中，解决不了溢出问题。
为什么 fixed 弹窗在 iPhone 上右侧被裁、底部看不见？
常见现象：弹窗在桌面端正常，一到 iPhone SE（375px 宽）就横向滚动或底部按钮消失——这不是 bug，是盒模型和视口计算叠加导致的。
-
width: 500px这类固定值直接超出小屏视口，必须替换 -
max-width: 480px单独用不够：它不控制小屏下的实际宽度，得配合width: 90%或width: 100% -
padding: 24px在 375px 屏上占掉近 13% 水平空间，若再加border或box-shadow，且没设box-sizing: border-box，总宽必然超限 - 未限制
max-height+overflow-y: auto，内容撑高后，fixed 元素会“顶出”视口底部，尤其 iOS 键盘弹出时更明显
宽度控制：用 clamp() 还是 calc()？
两者都行，但适用场景不同。别无脑套用 clamp(300px, 90%, 480px)——旧版 Safari 不支持三值 clamp()，而 calc() 兼容性更好。
- 稳妥写法：
width: calc(100% - 32px)（预留左右各 16px 边距），再配max-width: 480px，min-width: auto（禁用min-width: 300px，否则折叠屏下强制拉伸） - 若用
clamp()，降级方案必须存在，例如：width: 90%; width: clamp(280px, 90%, 480px); - 所有弹窗根容器（如
.modal-overlay）必须加box-sizing: border-box，否则padding和border会额外加宽
高度与滚动：max-height 失效的真正原因
写了 max-height: 80vh 却不滚动？大概率是父容器没提供可滚动上下文，或者 vh 在 iOS 键盘弹出时塌缩。
立即学习“前端免费学习笔记（深入）”；
-
.modal-overlay（遮罩层）必须用min-height: 100vh; height: 100%组合，不能只写height: 100vh -
.modal-content只设max-height: calc(100vh - 120px)（预留标题+按钮高度），禁用height或min-height - 必须加
overflow-y: auto，且确保父级没设overflow: hidden - iOS Safari 中，给
.modal-content加min-h-0（Tailwind）或min-height: 0（原生 CSS），否则 flex 子项不收缩，滚动失效
内容子元素溢出：图片、长文本、表单全都要管
弹窗容器缩好了，里面一张图、一个 URL 或输入框照样能撑破边界——溢出常发生在最不起眼的子元素上。
-
img必须加max-width: 100%+height: auto，否则原始尺寸生效 - 长 URL 或代码块加
word-break: break-word（比overflow-wrap兼容性更好） -
input、textarea显式设width: 100%，默认宽度继承不可靠 - 内部容器（如弹窗 body 区域）建议加
overflow-x: hidden，防意外横向溢出
最易忽略的一点：所有这些约束都得在真机上开键盘测试。iOS 的 visualViewport 高度变化会让 vh 值突变，模拟器测不出真实滚动错位。别等上线才发现用户点不了确认按钮。
