1、问题
在开发移动端页面时遇到一个问题,在手机浏览器上底部弹出页input输入时整个弹出页被输入法顶起,导致浏览器
的地址栏遮住了被顶起的顶部部分页面
2、解决
通过调试分析发现,部分手机自带的浏览器显示正常,但是在第三方浏览器中页面被输入法顶起,因为我的页面已经
写完,重写耗时较长,在原有基础上,进行了优化。
页面样式:定位fixed,高度400px
方法1:弹出输入法时,设置弹出页距离顶部的距离
$(document).ready(function(){
//屏幕当前的高度
var oHeight = $(window).height();
$(window).resize(function(){
if($(window).height() < oHeight){
$("#btn-selectType").css("top","75px");
}else{
$("#btn-selectType").css("top","");
}
});
});
方法2: 弹出输入法时,设置弹出页距离底部的距离
//屏幕当前的高度
var oHeight = $(window).height();
$(window).resize(function(){
//获取键盘的高度:oHeight - $("section").height(); 弹出页高度400px
var keyboardHeight = oHeight - $("section").height() - 380;
if($(window).height() < oHeight){
$("#btn-selectType").css("bottom","-" + keyboardHeight + "px");
}else{
$("#btn-selectType").css("bottom","0px");
}
});
3、总结
建议使用第一种方法,可兼容大部分手机,体验较好
第二种方法,因为手机屏幕大小不一样以及手机输入法窗口不一样,部分手机输入法遮盖弹出页部分过多,体验不好