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

原创 2015年06月18日 11:46:36

场景描述, 当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'});
			}
		});


版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

AngularJS指令参数详解

指令,很重要 AngularJS与JQuery最大的区别在哪里?我认为,表现在数据双向绑定,实质就是DOM的操作形式不一样。 JQuery通过选择器找到DOM元素,再赋予元素的行为; ...

JQuery AJAX $.get()方法

AJAX = Asynchronous JavaScript and XML.        AJAX 是一种创建快速动态网页的技术。        AJAX 通过在后台与服务器交...

Ajax学习——jQuery下的post和get请求

“要点” jQuery下的post,get请求 常用的jQuery的AJAX方法

ajax中get和post的提交、却别、错误处理以及注意事项

Document     $.get和$.post的不同     1、get通过url提交的,post是通过http消息实体提交的     2、get提交大小限制为2kb,post不限制     ...

Spring MVC+Mybatis+Maven+Velocity+Mysql整合实例

本篇文章将通过一个简单显示用户信息的实例整合Spring mvc+mybatis+Maven+velocity+mysql. 对于实现整合的重点在于以下几个配置文件的实现 1.Maven依赖包 ...

Java包(package)的命名规范,java中package命名规则

Java的包名都有小写单词组成,类名首字母大写;包的路径符合所开发的 系统模块的 定义,比如生产对生产,物资对物资,基础类对基础类。以便看了包名就明白是哪个模块,从而直接到对应包里找相应的实现。 ...

原生ajax post 和get 方式传值

原生ajax post 和get 方式传值

webstorm简单介绍,webstrom基本使用

WebStorm混搭svn WebStorm混搭nodeJS     以less和uglify-js为例     如何用npm在root中下载模块  ---...

html5手机网站需要加的那些meta/link标签,html5 meta全解

一、大众机型常用meta标签name的设置 1、name之viewport 说明:屏幕的缩放 content的几个属性:     width viewport的宽度[device-width |...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)