HTML移动端地址栏变化布局的稳定方案-html教程-PHP中文网

100vh 在移动端不可靠，因其为静态值，不随地址栏、键盘显隐实时更新，导致滚动错位或输入框被遮挡；应优先用 min-height: 100dvh 并 @supports 降级至 100vh，必要时辅以 JS 动态同步 --vh。

html移动端地址栏变化布局的稳定方案

直接用 100vh 做高度基准，在 iOS Safari 或微信 WebView 里基本会错位——地址栏收起时内容被顶出视口，弹出键盘时输入框直接被盖住。

为什么 `100vh` 在移动端不可靠

100vh 是页面加载瞬间计算的静态值，不随地址栏、工具栏、虚拟键盘的显隐实时更新。iOS Safari 的 window.innerHeight 滚动时会变，但 100vh 不会跟着变。

初始渲染正常，一滚动就底部留白或内容截断
聚焦弹出键盘后，100vh 还按全高算，输入框被遮挡
微信、QQ 浏览器等壳浏览器几乎不修正该行为，纯 CSS 无解

用 `100dvh` 替代并加降级逻辑

100dvh（dynamic viewport height）是真正响应式单位，iOS Safari 16.4+、Chrome 105+、Firefox 114+ 已稳定支持，它随地址栏/键盘实时更新。

必须用 min-height: 100dvh，不能用 height: 100dvh，否则内容超长会被裁剪
用 @supports 降级：不支持 dvh 的旧环境 fallback 到 100vh
CSS 示例：

html, body {
  margin: 0;
}
body {
  min-height: 100dvh;
}
@supports not (min-height: 100dvh) {
  body {
    min-height: 100vh;
  }
}

兼容极老环境的 JS 补丁方案

若需支持 iOS 15.6 以下或 Android 4.4 WebView，得手动同步视口高度：

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载