100vh在手机上不准是因为它基于浏览器理论最大高度而非实时可视区域，不响应地址栏、键盘等ui变化；dvh才是真·全屏单位，随当前ui状态实时更新，兼容ios 16.4+/chrome 105+，需用@supports或层叠写法做fallback。

为什么100vh在手机上总是“不准”

因为 vh 拿的是浏览器“理论最大高度”，不是你眼睛看到的可用区域。iOS Safari 和 Android Chrome 都会在地址栏展开时压缩视口，但 vh 不更新——结果就是：页面初始加载时内容被遮挡，滚动后突然“下坠”，表单弹出键盘时输入框直接消失。

这不是 bug，是规范行为。它从桌面端设计而来，压根没考虑移动端 UI 的动态性。

• 100vh ≈ 设备屏幕物理高度 × 缩放比例（固定值）
• 不响应地址栏收起、键盘弹出、横竖屏切换等任何实时变化
• 在 iOS 上尤其明显：Safari 地址栏收起后视口变高，vh 却不变

dvh 是当前最实用的“真·全屏单位”

dvh 会随浏览器当前 UI 状态实时重算高度：地址栏展开时接近 svh，收起时逼近 lvh，键盘弹出时自动收缩。它才是真正意义上“你看到多高，它就多高”的单位。

使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Andr​​oid友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Andr​​oid应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

• 适合全屏轮播、登录页、弹层遮罩、表单页等需要贴合当前可视区域的场景
• 注意：频繁触发重排可能带来轻微性能开销，但对现代设备影响极小
• 兼容性已覆盖 iOS 16.4+、Android Chrome 105+、Safari 16.4+（2026 年主流环境基本无压力）
• 示例：.login-page { height: 100dvh; } —— 键盘弹起时自动缩小，收起后恢复

svh 和 lvh 是“保守派”和“激进派”

svh 和 lvh 都是静态值，只在页面加载或设备方向改变时计算一次，之后不再响应 UI 变化。

• svh = 最小可能视口高度（地址栏 + 底部工具栏全开），适合底部固定操作栏、必须始终可见的按钮
• lvh = 最大可能视口高度（地址栏完全隐藏），适合“沉浸式”背景图、视频封面等追求视觉延展的场景
• 二者都不适合表单交互类页面——svh 在地址栏收起后留白太多，lvh 在键盘弹出时必然溢出
• 示例：.footer-nav { height: 60svh; } 确保导航始终在可视区内；.hero { min-height: 100lvh; } 让封面撑满潜在最大空间

别忘了 fallback 和渐进增强

哪怕现在兼容性不错，dvh 在旧版 Safari 或某些 WebView 中仍会退化为 vh。直接写 height: 100dvh 而不做兜底，等于把风险交给用户设备。

• 用 @supports 检测：@supports (height: 100dvh) { .page { height: 100dvh; } }
• 或者层叠写法：.page { height: 100vh; height: 100dvh; }（后者优先生效）
• 极端情况可结合 JS 补偿：document.documentElement.style.setProperty('--dvh', `${window.innerHeight}px`)，再用 height: calc(var(--dvh) * 1)
• 真正容易被忽略的点：dvh 对 min-height / max-height 同样生效，但 vh 在这些属性里行为更不可控——统一用 dvh 能减少意外

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！