微信浏览器软键盘弹出与页面resize的问题

　　使用微信打开网页，弹出软键盘时遇到的兼容问题

　　过去开发中遇到过很多这种情况，页面底部需要固定定位一个按钮，广告栏或者菜单栏，页面中有表单项需要填写，在打开手机虚拟键盘的时候，底部固定定位的元素会处在软键盘上方，把本来就所剩无几的页面几乎都挡住了（一般发生在不使用框架的单独页面中），而浏览器并没有为开发者提供呼出软键盘的事件监听方法。

　　之前我的解决方法是

 

window.onresize = function(){
    if(document.body.clientHeight<500){
         document.getElementById('底部元素id').style.display = 'none';
    }else{
         if(document.getElementById('底部元素id').style.display == 'none'){
               document.getElementById('底部元素id').style.display = 'block';
         }
    }
}

　　

　　当用户呼出软键盘时，页面会触发resize事件，页面大小变小，高度只有原有高度减去键盘高度的高度，一般都小于500，

同时市面上也几乎没有屏幕原有高度就小于500的手机，所以在resize触发后判断，如果document.body.clientHeight<500

即视为呼出软键盘，此时可以随意处理碍眼的元素了，只是要记得键盘收回后能一切复原就行。

 

　　但是现在使用微信浏览分享网页或者扫码查看网页的情况越来越普遍，而在微信中这个方法却行不通了。

准确地说，是情况变得不稳定，安卓手机还正常，但是在ios中，正常的情景是：

　　点击输入框-弹出软键盘-底部元素自动处在键盘下方被覆盖(这是未作任何处理的情况，可以说已经解决了问题)，

　　可惜会有一定的几率出现底部元素跑到键盘上方遮挡其他元素的情况。而我上面的代码则完全没有响应，底部元素并没有隐藏。

　　在一番检查之后发现了原因，resize事件根本没有被触发。

　　我们知道clientHeight指的是网页可视区高度，呼出键盘它并没有改变，也没有将页面顶上去，而是自动定位在了获取焦点的表单元素上，虚拟键盘覆盖在了原来的页面上，所以clientHeight没有改变，更不会小于500。

PS：经检查，并不是所有ios设备都存在此现象，目前发现的环境为iphone7，微信内打开，输入法不限。

　　android微信使用的是qq浏览器X5内核，关于此浏览器的更多兼容问题及解决办法文章末尾会有转载的链接供查阅，ios不允许使用其他浏览器，用的应该是苹果内核，但是ios高低版本之间还有差别，也可能是safari版本不同造成的。这个问题在搞清楚原因之后也很容易地找到了替代解决方法。

$('表单父元素').on('focus','input',function(){

    document.getElementById('底部元素').style.display = 'none';

})

$('表单父元素').on('blur','input',function(){

    document.getElementById('底部元素').style.display = 'block';

})

 

　　表单元素获取焦点时隐藏底部元素，失去焦点时重新显示。页面比较简单，所以这么写也没什么问题。

 

总结：

最新iphone微信内置浏览器中的虚拟键盘会覆盖在原有页面上，不会改变页面可视区的大小。

弹出虚拟键盘时，获取焦点元素会自动滚动到键盘上方的区域方便查看，但是因为这个原因，当点击页面靠下的表单项时，

固定定位在底部的元素会有几率显示在虚拟键盘区域上方遮盖其它内容，在制作存在这种交互可能的产品时应多加注意。

 

qq浏览器X5内核常见问题

http://blog.csdn.net/kongjiea/article/details/49176153