zoukankan      html  css  js  c++  java
  • 移动端解决fixed和input获取焦点软键盘弹出影响定位的问题

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

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

    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元素顶上去(次现在在部分安卓上能发现)如下图

    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、解决屏幕旋转也会出现以上问题

    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.         });  



  • 相关阅读:
    HDU-5514 Frogs 容斥
    2019ICPC EC-FINAL H-King 随机
    2019ICPC EC-FINAL E-Flow 贪心
    洛谷P4200 千山鸟飞绝 Splay
    CodeForces 1249F Maximum Weight Subset 树形dp
    HDU-5534 Partial Tree 完全背包优化
    【数论】Lucas定理
    [APIO2009]抢掠计划 解题报告
    tarjan(缩点)
    树状数组总结
  • 原文地址:https://www.cnblogs.com/wangxy/p/4935879.html
Copyright © 2011-2022 走看看