关闭

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

51414人阅读 评论(6) 收藏 举报
分类:

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


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

(function bottonm(){
			if($(document).height()<$(window).height()){
				$('.bottom_fix').css({'position':'fixed','bottom':'0px'});
				$(document).height($(window).height()+'px');
			}
		})();

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


$('#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、解决屏幕旋转也会出现以上问题

$(document).bind('orientationchange',function(){
			if(window.orientation==90 || window.orientation==-90){
				$('.bottom_fix').css('position','static');
			}else{
				$('.bottom_fix').css({'position':'fixed','bottom':'0'});
			}
		});


1
13

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:1600680次
    • 积分:11607
    • 等级:
    • 排名:第1318名
    • 原创:202篇
    • 转载:74篇
    • 译文:0篇
    • 评论:108条
    友情链接
    最新评论