h5页面,输入法顶起页面底部div.(安卓有此问题,ios没问题)

问题背景:h5登录页,ios访问时点击input框的时候页面的高度不变,但是安卓访问的时候页面高度变小,底部的微信登录按钮(class="footer")会与input框重叠, 这个是转载的别人的帖子,只是对问题描述略加修改.

原贴地址:http://blog.csdn.net/zhanglianchang10/article/details/52698626?locationNum=8

h5页面,输入法顶起页面底部div.(安卓有此问题,ios没问题)_第1张图片

问题来了,当准备向输入框里输入文本的时候,这时会唤起输入法键盘以响应用户输入,就在这时,底部的竟

然也跟上输入法键盘上去了,此现象iOS没问题,安卓必现,


h5页面,输入法顶起页面底部div.(安卓有此问题,ios没问题)_第2张图片



解决方案:我们知道在输入法键盘唤起前后整个document的高度是有变化的,此时可以监听window的

resize事件,简单的讲就是在整个document的高度变化时将底部的footer隐藏掉,在整个document文档的高度

最大时(就是原先输入法键盘未被唤起时的高度);代码如下:

补充: ios 使用alert(oHeight)时,值为链接地址+页面高度,安卓alert(oHeight)时,只有高度.
var oHeight = $(document).height(); //屏幕当前的高度
$(window).resize(function(){
        if($(document).height() < oHeight){
        $("#ibo-window-bottom").css("display","none");
    }else{
        $("#ibo-window-bottom").css("display","block");
    } 
    });


效果如下:
h5页面,输入法顶起页面底部div.(安卓有此问题,ios没问题)_第3张图片

你可能感兴趣的:(h5页面,输入法顶起页面底部div.(安卓有此问题,ios没问题))