您的位置:首页 > 移动开发

移动端解决fixed和input获取焦点软键盘弹出影响定位的问题

2015-11-04 14:23 736 查看
场景描述, 当document的高度不够window的高度时候,如在ip6中文档的高度比窗体的高度小,到底设计在最下方的区域没有在窗体最下方,就留有空白地方如下图的灰色部分



1、 解决初始化文档高度,让文档高度等于窗体高度,并fixed需要定位的区域在最下方

[html] view plaincopyprint?

(function bottonm(){

if($(document).height()<$(window).height()){

$('.bottom_fix').css({'position':'fixed','bottom':'0px'});

$(document).height($(window).height()+'px');

}

})();

2、解决输入框input获取焦点得时,虚拟键盘会把fixed元素顶上去(次现在在部分安卓上能发现)如下图



[html] view plaincopyprint?

$('#phone').bind('focus',function(){

$('.bottom_fix').css('position','static');

//或者$('#viewport').height($(window).height()+'px');

}).bind('blur',function(){

$('.bottom_fix').css({'position':'fixed','bottom':'0'});

//或者$('#viewport').height('auto');

});

参考:http://www.cnblogs.com/yexiaochai/p/3561939.html

3、解决屏幕旋转也会出现以上问题

[html] view plaincopyprint?

$(document).bind('orientationchange',function(){

if(window.orientation==90 || window.orientation==-90){

$('.bottom_fix').css('position','static');

}else{

$('.bottom_fix').css({'position':'fixed','bottom':'0'});

}

});
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: