移动端解决fixed和input获取焦点软键盘弹出影响定位的问题
2015-06-18 11:46
751 查看
场景描述, 当document的高度不够window的高度时候,如在ip6中文档的高度比窗体的高度小,到底设计在最下方的区域没有在窗体最下方,就留有空白地方如下图的灰色部分
1、 解决初始化文档高度,让文档高度等于窗体高度,并fixed需要定位的区域在最下方
2、解决输入框input获取焦点得时,虚拟键盘会把fixed元素顶上去(次现在在部分安卓上能发现)如下图
3、解决屏幕旋转也会出现以上问题
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'}); } });
相关文章推荐
- android基础学习--gravity和weight属性
- iOS开发中用到的高效的宏定义
- IOS代码获取内存大小
- ios Notification 与多线程
- Android 控件属性介绍
- iOS中的动画
- android sp 对小数点的支持
- 如何下载和编译Android4.0内核源代码goldfish(图像)
- 通过实现ApplicationContextAware接口获取bean
- Android中的颜色对应的值
- 在Android Studio中使用Android-PullToRefresh Library
- android布局学习--嵌套布局
- Android-对话框
- Android-序
- openssl ios 公钥分段加解密
- iOS代码技巧之判断设备及状态
- 理解Objective-C Runtime(三)消息转发机制
- Android打开其它应用程序(人人,微信,微博等等)
- android studio 目录结构
- IOS 时间 日历 处理集合