移动野生动物园iOS 11：Web应用程序和全高（100vh）与导航栏重叠

Question

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

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

是否有一种共同的，干净的解决方法？

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

编辑顺便说一句，这段代码运行在我的Angular4“响应式移动第一和渐进式网络应用程序”的ngAfterViewInit（）方法中（buzwords power）

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将增加导航栏的高度。