<p>移动端弹窗滚动失效的根本原因是max-height百分比值在父容器高度未固定时计算为0或极小值，导致overflow失效；应改用max-height: calc(100vh - 140px)、height: fit-content和-webkit-overflow-scrolling: touch三行关键CSS。</p>
移动端弹窗内容被裁剪、滚动失效，不是 CSS 写得不够多，而是高度没算对——max-height: 30% 在没有明确父容器高度时等于无效。
为什么 overflow-y: scroll 在手机上不生效
常见错误现象：桌面端能滚动，真机一打开就卡住，内容只显示顶部几行，拖不动也点不中。
根本原因在于：.popup .content 的 max-height 是百分比值，而它的父元素（比如 .popup）本身高度由内容撑开，没有固定参照；结果计算出的高度可能是 0px 或极小值，overflow 失去作用边界。
移动端更敏感，因为视口高度动态变化（软键盘弹出、折叠屏展开）、浏览器对百分比高度的解析更严格。
立即学习“前端免费学习笔记（深入）”；
- 别用
max-height: 50%这类依赖父高的写法 - 避免让
.popup同时承担「遮罩层」和「内容容器」双重角色，容易触发堆叠上下文干扰滚动 - Android WebView 和 Samsung Internet 对
vh单位的支持存在渲染延迟，首次加载可能取到错误视口高度
height 和 vh 怎么选才稳
直接设 height: 80vh 看似简单，但在折叠屏半展开、iOS Safari 地址栏收起/展开时，vh 会跳变（比如从 768px → 812px），导致内容区域突然拉伸或收缩，滚动位置丢失。
更可靠的做法是混合使用：max-height + min-height + 固定基准单位。
- 优先用
max-height: calc(100vh - 120px)：预留头部、按钮、内边距空间，避免被软键盘顶飞 - 补一句
min-height: 200px，防止小屏下内容过少时区域塌陷 - 如果必须用
vh，加 JS 监听resize（不是orientationchange）并重设高度 - 禁用
body { overflow: hidden }，改用position: fixed; top: 0锁定背景，否则 iOS 会强制启用弹性滚动，干扰弹窗内部滚动
移动端弹窗滚动必须加的三行 CSS
这三行不是“可选优化”，而是解决 90% 滚动失败问题的最小必要集合：
.popup .content {
height: fit-content;
max-height: calc(100vh - 140px);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}height: fit-content 让内容区域主动收缩包裹内容，避免因 flex/grid 布局撑满父容器而挤占滚动空间；-webkit-overflow-scrolling: touch 是 iOS 必须项，否则滚动卡顿、回弹异常；overflow-y: auto 比 scroll 更安全——只在需要时显示滚动条，不破坏布局流。
- 别写
overflow: scroll，它会强制显示滚动条轨道，浪费空间且在小屏上遮挡内容 - 如果内容里有
input，确保.popup没有transform，否则 iOS 软键盘弹出会错位 - 安卓部分低端机型不支持
fit-content，可降级为height: auto+ 显式min-height
折叠屏和双屏设备要额外防什么
Galaxy Z Fold、Pixel Fold 这类设备在横竖屏切换、半折叠态下，视口尺寸突变剧烈，单纯靠媒体查询容易漏掉中间状态。
- 不要在同一个容器上混用
display: flex和子元素display: grid，Android WebView 会忽略grid-gap或错乱滚动区域 - 避免用
window.devicePixelRatio计算弹窗尺寸，模拟器和真机 DPR 差异大（Z Fold3 实测 DPR=3.5，DevTools 常报 2.8） - 真机测试必须覆盖「半折叠」状态：此时宽度可能是 270px，但高度仍接近 1800px，
vh取值极易失准 - 弹窗关闭后，记得手动恢复
body的position和top，否则页面会整体偏移
最麻烦的不是写不出来，而是写出来后在 Galaxy Z Fold 横向半展开 + 软键盘弹出 + 页面已滚动 200px 的组合场景下，滚动突然失效——这种 case 得靠真机反复压测，CSS 预设值永远覆盖不了所有动态边界。
