css - 移动 safari 和 iOS 11 : Web apps and full height (100vh) overlapped by nav bar

Question

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

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

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

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

编辑 顺便说一下，这段代码在我的 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');
}

Answer 1

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