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

Question

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

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

有一个共同和干净的方法来解决这个问题吗？

我使用以下代码修复此问题.这对我来说很难看.用户代理推导出平台/浏览器和硬编码偏移以消除本机行为.相信我的解决方案并不好:

编辑 btw此代码在我的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 将增加导航栏的高度。