移动 safari 和 iOS 11：导航栏重叠的 Web 应用程序和全高 (100vh)

Posted 2023-03-06

【中文标题】移动 safari 和 iOS 11：导航栏重叠的 Web 应用程序和全高 (100vh)

【英文标题】：Mobile safari & iOS 11 : Web apps and full height (100vh) overlapped by nav bar

【发布时间】：2018-04-12 20:19:44

【问题描述】：

在 Mobile Safari 上使用 100vh 不会考虑下部导航栏的高度。

以下面的示例截图为例。为了显示类似应用程序的页脚，我需要手动（并且以一种丑陋的方式，请参见下面的代码）从容器的高度中减去 74px。不这样做只会将我的页脚隐藏在移动 Safari 的导航页脚下。

有没有一种通用且干净的方法来解决这个问题？

我使用以下代码解决了这个问题。这对我来说很难看。用户代理推断出平台/浏览器和硬编码偏移以摆脱原生行为。相信我的解决方案感觉不好：

编辑顺便说一句，这段代码在我的 Angular4“响应式、移动优先和渐进式网络应用”（流行语的力量）的 ngAfterViewInit() 方法中运行。

const wrapper:any = document.getElementsByClassName('hack-to-fix-ios-height')[0];
if(wrapper && this.iOS())
  let height = wrapper.offsetHeight;
  height -= 74;

  // Mobile Safari fix for footer nav
  this.renderer.setStyle(wrapper, 'height', height + 'px');

【参考方案1】：

尝试将 wrapper.style.height 设置为 window.innerHeight。我相信这会给你没有导航栏的高度 - 如果导航栏是可见的。如果您的用户向下滚动并使导航栏消失。然后 window.innerHeight 将增加导航栏的高度。