H5浏览器上使用100vh的坑及解决办法

背景：

近期开发一个移动端的详情页，布局是有一排操作按钮固定在页面底部，中间内容部分在页面内总想滚动，开发时我把页面中间部分的高度设置为100vh - 50px，overflow：auto；在浏览器的控制台模式看没问题，微信上的浏览器和小程序看这个页面也没问题，最后突然发现在安卓和苹果手机的浏览器上展示有问题，具体表现为：

1. 安卓（华为mate60）：页面展示地址栏和底部导航栏时，看不到操作按钮，当页面滚动时顶部地址栏隐藏，底部的操作按钮被滚动上来了

2. 苹果：页面直接不展示底部的操作按钮，无论页面滚动导致顶部地址栏是否隐藏

经查阅资料，移动端浏览器包含顶部地址栏，搜索栏，底部导航栏，它们会占据一定的高度，影响网页内容的可视区域。通常情况下，100vh 即视口高度会减去这些浏览器 UI 的高度，以确保网页内容不会被这些 UI 遮挡。

但是移动端的地址栏有时可见，有时隐藏，从而改变了视口的可见大小。 这些浏览器没有将100vh高度调整为视口高度变化时屏幕的可见部分，而是将100vh设置为浏览器的高度，并隐藏了地址栏。 结果是，当地址栏可见时，屏幕的底部将被切除。 如下所示：

当不展示地址栏时，浏览器的100vh为屏幕可视区的高度，当展示地址栏时，顶部地址栏占了高度，此时网站内容被往下移，因此网站底部的内容被切断不展示。 因此用100vh会造成很大影响，当用户首次访问移动设备上的网站时，地址栏将在顶部可见，导致底部的元素没有显示。

解决方案：使用window.innerHeight

页面加载时，将高度设置为window.innerHeight可以将高度正确设置为窗口的可见部分。 如果地址栏可见，则window.innerHeight将为全屏的高度。 如果地址栏是隐藏的，则window.innerHeight将是屏幕上可见部分的高度，至此完美解决～

注意⚠️

100vh在移动浏览器中以微妙但基本的方式被破坏，这使其几乎无用。 最好避免100vh ，而是依靠javascript设置高度以获得完整的视口体验。

因此，在设计响应式网页时，最好测试在不同的手机浏览器上，以确保页面的可视区域能够正确适应不同的环境。