Angular+Tailwind移动端虚拟键盘唤起时布局错乱问题求助

• 核心问题出在静态视口高度与固定定位的组合使用：
  • 基础CSS里html用了h-screen，这个类对应初始视口高度，移动端虚拟键盘唤起后，视口实际高度被压缩，但h-screen不会实时更新，导致布局超出可视区域。
  • 移动端媒体查询中给.layout设置了position: fixed和height: 100%，键盘弹出时，height: 100%仍取键盘唤起前的视口高度，无法自适应新的可视区域，进而引发布局错乱。

1. 替换静态视口高度为动态视口高度 #

修改基础CSS中的html样式，用Tailwind的h-dvh（动态视口高度）替代h-screen，它会实时响应视口高度变化（包括键盘唤起/收起）：

@layer base {
  html {
    display: flex;
    flex-direction: column;
    @apply h-dvh w-screen; /* 替换h-screen为h-dvh */
  }
  body {
    @apply h-full w-full m-0 p-0 bg-white font-medium text-[#77767A];
    font-family: 'Lato';
  }
}

2. 调整移动端布局的固定定位逻辑 #

移除媒体查询中的固定定位设置，改用动态高度配合flex布局，避免固定定位导致的高度不自适应问题：

@media (pointer: none), (pointer: coarse) {
  .layout {
    /* 移除position: fixed */
    height: 100dvh; /* 使用动态视口高度 */
  }
}

3. 确保组件宿主高度自适应 #

调整App Layout组件的:host样式，补充动态高度设置，确保能继承父级的动态高度：

:host {
  @apply flex flex-col h-dvh; /* 增加h-dvh确保高度自适应 */
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

App组件CSS保持原有设置即可，因为父级（html/body）的高度已改为动态：

:host {
  @apply h-full w-full;
}

4. 优化布局容器的flex行为 #

修改App Layout组件模板中的容器，添加滚动属性确保内容超出时可正常滚动：

<div class="h-full flex flex-col w-full layout !bg-red-500 p-8 overflow-auto">
  <div class="flex-grow bg-white flex items-center justify-center">hello</div>
</div>

• dvh是Tailwind v3.2+支持的动态视口单位，会自动适配虚拟键盘唤起后的视口高度，比传统vh更适合移动端场景。
• 若需兼容旧版Tailwind或浏览器，可通过JavaScript监听视口高度变化动态更新元素高度，但优先推荐dvh方案。

内容的提问来源于stack exchange，提问作者Madhav Singh