移动端解决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'});
			}
		});


移动端页面开发的“坑”

现在的前端开发者基本都要同时着手PC端页面和手机页面的开发工作,就目前的状况来看,手机页面的兼容性要比PC端更为复杂(当然主要是只在android端,大家懂的),而且有些样式在PC端页面上可能没什么,...

移动端web整理 移动端问题总结,移动web遇到的那些坑

http://www.cnblogs.com/PeunZhang/p/3407453.html#question_20 meta基础知识 H5页面窗口自动调整到设备宽度,并禁止用户缩放页面忽略将页...

移动端笔记系列2--移动端样式和布局的坑

前言 为了兼容各种手机系统的样式,我们需要重置一下移动端的样式。 关于样式为了统一页面的显示,所以要清除移动端各种手机或系统的默认样式,具体得看公司和产品的需求了,当然,没有什么要求的话只用nor...

safari 浏览器不支持input 样式

在做页面时 发现谷歌火狐对input表单支持的样式挺好 但在Safari浏览器看时 样式却没有了 原来Safari对input有默认的样式 只要在对应的input样式上加-webkit-appea...

移动端内容显示在一页时,虚拟键盘输入与position:fixed的冲突解决

一、正确做法1(适用于内容全部显示在一页): 1、代码片段:... *{ margin:0; padding:0; } html{ ...
  • aSuncat
  • aSuncat
  • 2016年08月01日 11:51
  • 5531

web端ios布局fixed元素软键盘唤起时fixed失效

在ios上做了一个简单的页面头部置顶底部置顶源码如下: Title *{ margin: 0; ...

js|虚拟键盘挡住input标签,fixed元素

js|虚拟键盘挡住input标签if(/Android [4-6]/.test(navigator.appVersion)) { window.addEventListener("resize...

小技巧css解决移动端ios不兼容position:fixed属性,无需插件

ios运用position:fixed会错位,css一行样式巧妙解决定位问题。
  • liu__hua
  • liu__hua
  • 2014年10月15日 09:34
  • 97077

js在手机端如何用脚本调用弹出键盘?

js在手机端如何用脚本调用弹出键盘? 鍵盤只能靠使用者行為觸發,不能通過腳本觸發,測試過 ios 和 android 確實是如此。 而所謂的使用者行為只可以通過綁定事件觸發 ...

js-移动端android浏览器中input框被软键盘遮住的问题解决方案

解决input框被软键盘弹出的 问题解决方案
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:移动端解决fixed和input获取焦点软键盘弹出影响定位的问题
举报原因:
原因补充:

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