h5适配android输入法,移动端H5页面底部输入框调起键盘ios与android的兼容问题

背景：工作需要，一个手机页面(vue项目)底部需要一个输入框，并且能够多行输入(这个这里就不多说了，搜一下就能找到方法)。

实现过程：首先使用的就是fixed方法将输入框部分固定到了页面底部，这个方法在安卓没有问题，ios的自带输入法也没问题，但是当ios使用第三方输入(比如搜狗)时，被推上去的输入框会被挡住一半(当时是一个iphone7)

解决过程：遇到问题后就在网上搜索解决办法，最先找到的就是滚动(大致意思就是使用window.scrollTo()方法滚动可以参考:h5实现输入框fixed定位在屏幕最底部兼容性。

第一种(滚动)：试了之后发现好像iphone7 ios12的系统没有问题了，但是ios11的系统还是被挡住了一半(哎，因为开发的有点着急，问题出现的情况没有做好记录，这里就是大概的回忆问题了)

第二种(比较键盘弹起后的页面高度(window.innerHeight)与输入框底部距页面顶部的高度(Element.getBoundingClientRect()方法返回元素的大小及其相对于视口的位置))：这个方法在iphone X显示正常，在7显示的innerHeight始终是页面的整体高度而不是减去键盘的高度，所以这个方法也不行了

第三种：想到了之前解决类似问题是一个方法(document.activeElement.scrollIntoView()),这个方法是可以传参数的，默认的是将当前元素滚动到可视居中的位置，如果传false则是滚动到底部。试了一下，ios页面显示效果为不会被推上去，so，放弃

第四种：网上很多说ios不支持fixed，回变成absolute啥的，尝试了一下flex布局&#