android 待机回主界面布局全乱,swiper 安卓 输入法导致页面布局错乱

安卓输入法遮挡输入框，安卓原生APP内嵌H5的问题

随笔备忘

近一周主要做了一个简单的H5问卷调查页面(评分)，应用环境是web，并且需要内嵌在原生APP中，效果如下：

刚开始认为是分分钟搞定的事情，结果差点栽了跟头，主要问题如题。

问题描述：在web端安卓系统手机上，swiper的slide分页在唤起输入法后出现；

问题1：输入法弹出后(实际是输入任意字符后，若不做任何输入操作，仅有遮挡输入框的问题)，页面布局变化，下一页slide的内容在当前页面显示，切关闭输入法后无法恢复，当前slide显示原页面下半部分，及下个slide的上办部分(出现原因主要是由于页面大小改变导致)；网上有类似问题，但没有找到好的解决方案，最后尝试了几次最后通过给swiper-wrapper类名的标签添加固定定位fix解决；但实际上是讨巧的方法，在输入框弹出状态时若去滚定页面有惊喜，但鉴于此操作可能性不大，暂且通过此方法处理；

问题2：在处理了问题1后，输入法遮挡输入框的问题就比较好解决了，网上有很多方法，如下：

if (/Android/gi.test(navigator.userAgent)) {

window.addEventListener('resize', function () {

if (document.activeElement.tagName == 'INPUT' || document.activeElement.tagName == 'TEXTAREA') {

window.setTimeout(function () {

document.activeElement.scrollIntoViewIfNeeded();

}, 0);

}

})

}

以上很好的解决了安卓设备在web端的遮挡问题以及swiper下的布局问题；但~

问题3：在web端算是解决了输入法造成的问题，但在内嵌在安卓APP里时问题又出现了；输入法遮挡的问题解决无效，这里和安卓开发沟通后，他表示没有很好的方法；最后的最后~~当然是该需求了~~~

其实最有效的方法是在页面设计初期将输入框置于页面的上半屏。那么问题就将不复存在；本页面是通过下方的《其他意见》按钮呼出隐藏的输入框，并focus ，这样输入法也会自动弹出，体验上不会差很多；