100% 还是 100vh

100vh 表示的高度在一些浏览器上会包含底部虚拟按键？

键盘遮盖

ios 下fixed失效

软键盘唤起后，页面的 fixed 元素将失效（ios认为用户更希望的是元素随着滚动而移动，也就是变成了 absolute 定位），既然变成了absolute，所以当页面超过一屏且滚动时，失效的 fixed 元素就会跟随滚动了。——引自 潇湘待雨

ios 第三方键盘可视区域

通常我们可以用 scrollIntoView() 将指定元素滚动到可视区域，但是，由于 ios 第三方键盘呼出时，键盘部分也作为可视区域，所以即使调用了 scrollIntoView() 元素还是会被键盘遮盖。原生键盘不会作为可视区域。

解决

用 window.innerHeight 获取键盘以上区域的高度，将某个元素设置为该高度，该元素底部放输入框即可。当键盘隐藏，再将该元素高度设置为100%。

键盘的 呼出/隐藏

ios 可以通过 focus/blur 捕获键盘的呼出/隐藏。

android 可以通过 window.resize 事件通过window.innerHeight高度来判断键盘呼出/隐藏。

为什么要分别用两种方式？

ios 键盘呼出/隐藏不触发resize事件，android 可以在输入框不失去焦点的情况下隐藏键盘。

参考资料