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

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

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

[html]  view plain  copy

 

 print?

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

 

 

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

 

[html]  view plain  copy

 

 print?

1. $('#phone').bind('focus',function(){  
2.             $('.bottom_fix').css('position','static');  
3.             //或者$('#viewport').height($(window).height()+'px');  
4.         }).bind('blur',function(){  
5.             $('.bottom_fix').css({'position':'fixed','bottom':'0'});  
6.             //或者$('#viewport').height('auto');  
7.         });  

参考：http://www.cnblogs.com/yexiaochai/p/3561939.html

 

3、解决屏幕旋转也会出现以上问题

[html]  view plain  copy

 

 print?

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

转载于:https://www.cnblogs.com/biglion/p/5977101.html