移动端弹窗被截断主因是viewport设置错误、fixed弹窗未用max-height动态约束、box-sizing未设为border-box及尺寸单位使用不当；应配置正确viewport、用max-height:80dvh+overflow-y:auto、全局box-sizing:border-box，并结合媒体查询兜底。
弹窗内容被截断，viewport 设置对了吗
移动端弹窗显示不完整，八成是 viewport 元标签没配对，或缩放行为干扰了布局计算。尤其在 iOS Safari 中，如果 initial-scale=1.0 缺失或 user-scalable=no 错误启用，会导致视口宽度误判，进而让 max-width: 100% 失效、弹窗撑出屏幕。
检查并确保 标签如下：
-
width=device-width是基础，缺了它，桌面 CSS 宽度规则会按默认 980px 解析 -
initial-scale=1.0必须显式声明，iOS 有时会忽略隐式行为 - 慎用
user-scalable=no：虽防缩放抖动，但会禁用双击放大，影响可访问性；如非必要，建议去掉
弹窗容器用了 fixed 定位，但 height 超过视口怎么办
用 position: fixed 的弹窗常因写死 height: 500px 或未设 max-height 导致底部被切。关键不是“设多高”，而是“怎么随视口动态约束”。
- 优先用
max-height: 80vh（不是height: 80vh），保留内容自适应空间 - 配合
overflow-y: auto，让内容可滚动而非溢出 - 避免在弹窗内用
min-height: 100vh—— 这会让弹窗强行占满整个屏幕，遮挡状态栏/导航栏，尤其在刘海屏上更明显 - iOS Safari 对
vh单位有兼容问题（地址栏收放时值会跳变），可改用dvh（dynamic viewport height）：max-height: 80dvh，Chrome 100+ 和 Safari 16.4+ 已支持
弹窗内部元素 width: 100% 仍溢出，是不是 box-sizing 搞错了
即使容器宽高响应式了，内部按钮、输入框、图片等仍可能撑破弹窗边界——大概率是 box-sizing 默认为 content-box，而 padding/border 被额外加在 width 之外。
立即学习“前端免费学习笔记（深入）”；
- 全局重置或至少对弹窗及其子元素设
box-sizing: border-box - 特别注意表单控件：
input[type="text"]、textarea在某些 Android 浏览器中默认有不可见的outline或border，需显式清空 - 图片未设
max-width: 100%和height: auto，容易在窄屏下横向溢出 - Flex 布局中子项未加
flex-shrink: 1，导致文字长时无法压缩，直接撑开父容器
使用 rem/vw/vh 做响应式尺寸，哪些值该用媒体查询兜底
纯 vw/vh 在小屏上可能导致字体过小、按钮过窄，纯 rem 又依赖根字号，两者混用时容易失控。真正稳妥的做法是：核心尺寸用相对单位，极端断点用媒体查询微调。
- 弹窗最大宽度建议用
max-width: 90vw，但加@media (min-width: 768px)后设为max-width: 500px，兼顾小屏不溢出、大屏不过于窄 - 字体大小可用
clamp(14px, 4vw, 18px)，但 iOS 15 以下不支持，需 fallback：font-size: 16px; font-size: clamp(...) -
padding和margin少用固定 px，改用1rem或2vw，但若弹窗内图标按钮小于 32px，必须用媒体查询保底为min-width: 32px
响应式不是“一套单位打天下”，而是根据设备能力分层控制。dvh、clamp、@container（未来可期）这些新特性能简化逻辑，但当前阶段，viewport + max-height + box-sizing + 媒体查询组合，仍是移动端弹窗不截断最稳的路径。
