Ipad中100vh 和 100%踩坑记

最近遇到了一个小bug，在ipad上编辑word文件的虚拟键盘收回时，会导致页面的导航条隐藏，且页面的下面会出现一块空白

自己尝试的解决方案

• 通过focusin和focusout对虚拟键盘的弹入弹出进行监听，但发现基本没什么用。我的理解是：focusin和focusout比较适合于监听对于文本输入框的键盘事件。

• 通过比较screen.availHeight和screen.height进行比较。如果在虚拟键盘弹出时元素的高度等有变化，那么可以尝试通过这种方式判断虚拟键盘是不是弹出来了.

• 另一种方法是：监听一个事件，比如我监听的就是scroll事件，对会发生隐藏的元素设置scrollIntoView或者scrollIntoViewIfNeeded,通过设置不同的参数，可以使得作用的元素与视口的上面或下面对齐。

• resizeObserver

• MutationObserver 用来监听DOM的变化，包括结构，属性这些。

后来发现，是css属性值的问题。

``

`
`

 `
`

 `
`

`
`

• 这里主要有两点需要注意：

• 在移动端设备中，尤其是ipad和iOS，100vh其实是比视口大，即100vh包含了下面的状态栏的高度。

• 另外，如上面的代码所示，父元素设置了display:flex， 子元素设置了flex: 1，按理说，子元素设置了这个属性之后，就和父元素的宽高相同了，但是要注意，在这里，子元素还设置了position: absolute。我们看一下W3C的文档怎么说

image

即，flex容器中的绝对定位子元素会脱离flex布局流，也就是说flex: 1对子元素来说已经失效了。因此他的高度为绝对定位中的100%设置的高度，但是又设置了overflow:hidden，因此才会在虚拟键盘隐藏时出现一部分空白，从而导致了导航条的隐藏。