Chrome移动端PWA全屏模式下应用区域超出HTML高度如何解决？

以下是几个可行的解决思路：

• 动态适配视口高度
  全屏模式下系统导航栏隐藏后，CSS的100vh可能未及时更新为实际可用高度，导致出现额外滚动区域。可以通过监听窗口事件，用window.innerHeight动态设置根元素高度：

  // 在app.component.ts中实现
  ngOnInit(): void {
    this.setViewportHeight();
    window.addEventListener('resize', this.setViewportHeight.bind(this));
    document.addEventListener('fullscreenchange', this.setViewportHeight.bind(this));
  }
  
  private setViewportHeight(): void {
    document.documentElement.style.height = `${window.innerHeight}px`;
  }
  
  ngOnDestroy(): void {
    window.removeEventListener('resize', this.setViewportHeight.bind(this));
    document.removeEventListener('fullscreenchange', this.setViewportHeight.bind(this));
  }
  

• 限制滚动范围到根组件
  将html和body设置为不可滚动，把滚动行为限制在Angular根组件内，避免整个文档出现多余滚动：

  /* styles.css全局样式中添加 */
  html, body {
    height: 100%;
    margin: 0;
    overflow: hidden;
  }
  
  app-root {
    display: block;
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch; /* 优化移动端滚动体验 */
  }
  

• 优化Web Manifest配置
  在webmanifest中添加display_override，确保全屏模式的兼容性，减少系统行为差异：

  {
    "name": "你的应用名称",
    "display": "fullscreen",
    "display_override": ["fullscreen", "standalone"]
  }
  

• 利用安全区域CSS变量
  针对安卓设备的系统栏，使用env()变量调整内容边距，同时配合滚动限制：

  app-root {
    padding-bottom: env(safe-area-inset-bottom);
  }
  

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