如何保持窗口高度恒定（Android Chrome导航栏CSS高度适配问题）

问题背景 #

• 开发浏览器游戏UI时采用分层架构，拆分可点击交互前景层、城市图片类背景元素
• 所有样式全程使用%单位设置height属性，未使用vh/vw单位
• 桌面端运行无异常，移动端Chrome滑动导航栏时出现布局错位：
  • 前景层始终以包含导航栏的窗口高度为定位基准，初始加载也遵循该规则
  • 背景层会随Chrome导航栏当前显示状态对应的窗口高度动态调整定位
• 预期目标：两层定位基准完全一致，要么同步随导航栏状态更新高度，要么统一固定以包含导航栏的窗口高度为基准，消除UI错乱
• 关联信息：
  • 问题效果预览：
  • 线上复现地址：问题版本线上演示
  • 项目技术栈：TailwindCSS

根本原因 #

这是Chrome移动端的固有视口计算特性导致的：Chrome移动端地址栏滑动收起/展开时，会同时存在两个视口高度值——初始加载时包含地址栏的大视口、地址栏收起后的可视区小视口。如果分层元素不在同一个BFC上下文、或者父级高度继承链路存在断点，就会出现不同层分别取两个不同高度值作为定位基准的问题，纯用%单位时如果根节点高度没有做统一锁定，该问题复现概率极高。

解决方案 #

两种方案对应两种预期效果，按需选择即可，注意同一项目内不要混用两种方案的高度规则。

方案1：统一固定以「包含导航栏的初始窗口高度」为基准（游戏场景优先推荐，适配成本最低） #

核心逻辑是从根节点锁定高度，阻断Chrome动态视口对内部元素的高度计算影响：

1. 首先给根节点设置全局样式，锁定高度基准：

html, body {
  height: 100%;
  overflow: hidden;
  margin: 0;
  padding: 0;
}
/* 游戏最外层容器统一高度基准，所有分层都放在该容器内 */
.game-root {
  height: 100%;
  width: 100%;
  position: relative;
  overflow: hidden;
}

2. 用Tailwind原生类实现无需写自定义CSS：给<html>标签加h-full overflow-hidden，<body>标签加h-full overflow-hidden m-0 p-0，最外层游戏容器加relative h-full w-full overflow-hidden即可。
3. 如果游戏内容需要滚动，不要在html/body上开滚动权限，把滚动区域作为.game-root的子元素，单独给滚动容器加overflow-y-auto即可。

方案2：统一随导航栏状态同步更新动态高度 #

如果需要适配导航栏收起后的全屏展示效果，就把所有层的高度基准统一绑定Chrome动态视口单位：

1. 全局样式设置：

html, body {
  height: 100dvh;
  margin: 0;
  padding: 0;
}
.game-root {
  height: 100dvh;
  width: 100%;
  position: relative;
}

2. 由于Tailwind默认内置工具类不支持dvh单位，需要先在tailwind.config.js中扩展自定义配置：

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      height: {
        'd-screen': '100dvh',
      }
    },
  }
}

3. 配置完成后，给html、body、游戏根容器统一加h-d-screen类，内部子元素继续用h-full继承高度即可，所有分层会同步跟随导航栏状态调整高度，不会出现错位。

避坑提示：同一条定位父子链路里不要混用%、vh、dvh三种高度单位，否则会再次出现高度基准不一致的问题。

内容的提问来源于stack exchange，提问作者Lars Flieger