移动端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布局，结果也是不行（忘了哪种机型出问题）
• 第五种：flex不行就试试absolute，结果ios没问题（7,v:11不行），安卓显示不能推起来

---

最终使用方案： 因为提到了是多行输入框，使用的是textarea，在ios中，输入多行时，光标位置出现问题，且使用ios的长按选择光标位置时，光标直接自动下移然后页面掉下。最终选择了使用absolute方案，在机型是安卓时使用scrollIntoView(fasle)，因为发现，键盘会遮挡部分（安卓机型都有），所以同时改变输入框距底部的高度。【此方法仍未解决iphone 7，或者ios中搜狗输入法遮挡问题】

---

部分代码

                var clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
                window.addEventListener('resize', function () {
                    var ua = navigator.userAgent.toLowerCase();
                    if (/android/.test(ua)){
                        var nowClientHeight = document.documentElement.clientHeight || document.body.clientHeight;
                        if (clientHeight > nowClientHeight) {
                            //键盘弹出的事件处理
                            if(document.activeElement.tagName === 'TEXTAREA' || document.activeElement.tagName === 'INPUT'){
                                document.activeElement.scrollIntoView(false)
                                _this.dogInput = true;  // 增加高度的处理
                            }
                        }else {
                            //键盘收起的事件处理
                            _this.dogInput = false;
                        } 
                    }

～～～若有建议，敬请指教。