微信浏览器软键盘弹出与页面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