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

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

浏览量：1424 时间：2019-12-19 来源：kongjiea

场景描述，当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'});}});

小程序

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题，烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ，我们将及时处理。本站文章仅作分享交流用途，作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关，请知悉。