min-height 媒体查询在移动端基本无效——因视口高度在旋转、地址栏显隐等场景下动态变化，但媒体查询不响应这些变化，且 vh 单位本身不准；应改用 dvh + clamp() 并辅以 JS 回退。
直接用 min-height 媒体查询做屏幕高度适配，基本无效——浏览器视口高度在旋转、缩放、地址栏显隐时频繁变化，min-height 查询无法稳定触发重排，且多数小屏设备（尤其是 iOS Safari）的 vh 单位本身就不准，硬套媒体查询反而会让布局“卡住”或“跳变”。
为什么 @media (min-height: ...) 在移动端几乎没用
真实场景中，用户横竖屏切换、iOS Safari 地址栏收起/展开、Chrome Android 的底部导航栏遮挡，都会导致 window.innerHeight 动态变化，但媒体查询只在初始渲染或窗口 resize 事件明确触发时检查，而很多 height 变化（如地址栏滑出）根本不会触发 resize，更不会重新跑 min-height 查询。另外，min-height 是针对视口（viewport）高度，但很多设备上报的 viewport height 并不等于可用内容区高度（比如 iPhone X+ 的安全区、刘海、底部 home indicator）。
-
@media (min-height: 600px)在 iPhone 13 竖屏下可能匹配，横屏后仍保持匹配，但实际可用高度已远小于 600px - Android Chrome 中，地址栏收起时
vh会突然拉伸，但min-height媒体查询不会响应这个变化 - 部分 WebView（如微信内置浏览器）完全忽略
min-height查询
真正可靠的替代方案：用 dvh + clamp() 控制容器高度
现代浏览器（Chrome 100+、Safari 16.4+、Firefox 112+）支持 dvh（dynamic viewport height），它能随地址栏、工具栏显隐自动更新；再配合 clamp() 设定弹性区间，比死守某个 min-height 值灵活得多。
例如让一个全高容器始终占满“当前真正可用”的视口高度，且不低于 400px：
立即学习“前端免费学习笔记（深入）”；
section.main {
min-height: clamp(400px, 100dvh, 800px);
}
-
400px是最小底线，防止极端小屏（如折叠屏半开状态）压扁内容 -
100dvh是核心，它比100vh更准，尤其在 iOS Safari 地址栏收起时能立刻响应 -
800px是上限，避免在桌面大屏上过度拉伸（可按需调整） - 注意：若需兼容旧浏览器，可用 JS 回退到
innerHeight监听 +style.minHeight动态设置
需要 JavaScript 配合的边界情况
当设计依赖“内容区绝对高度”（比如固定页脚贴底、滚动区域精确截断），仅靠 CSS 仍可能失准——特别是 iOS Safari 的 dvh 在页面加载初期偶尔延迟生效，或 WebView 中 dvh 不被识别。
- 监听
resize和orientationchange，但必须加防抖（setTimeout延迟 100ms），否则高频触发会导致样式抖动 - 关键逻辑应读取
window.visualViewport?.height || window.innerHeight，而非document.documentElement.clientHeight（后者不含地址栏区域） - 设置
style.minHeight = visualViewport.height + 'px'后，务必触发一次requestAnimationFrame再操作 DOM，避免样式未应用就计算布局 - 不要在
load事件里一次性设高度——此时visualViewport可能还未就绪
真正难的不是写对那行 clamp()，而是意识到：屏幕高度不是静态配置项，而是一个持续波动的信号。任何想“一劳永逸”靠媒体查询锁死高度的思路，在移动浏览器里都容易翻车。
