移动端解决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'});
}
});
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'});
}
});
相关文章推荐
- ios swift UITabBarController
- Android注解式绑定控件BindView
- 单例模式
- 日活百万APP会遇到哪些性能问题?
- Androidstudio error(1,0)错误,和(2.0)错误
- IOS安全–使用lldb对应用进行运行时分析
- android 关于mk如何引用其它so库
- 【Android】图片异步加载三方框架Universal Image Loader详细配置
- 【Android开发杂技】输入法高度获取(可监听变化)
- Android Studio安装教程
- Android的Root权限——su与adb
- 實戰案例 - 微信平台與自有產品資料對接 (2)
- IOS学习之block结构的简单用法和typedef的结合用法(block后面内容还没有看呢...)
- 移动端点击图片查看大图
- Android应用底部导航栏(选项卡)实例
- iOS正则表达式
- Android 自动化测试 常用的命令----随时更新
- class_respondsToSelector
- Android实现本地推送通知的解决方案
- Android Studio高效率小技巧