当我们在写H5页面时经常会有fixed固定位置的元素存在,例如下图左中的"作业帮一课APP下载框",当我们input输入的时候键盘会弹起并将fixed定位的下载框顶起,如下图右,ios和安卓部分机型都会有问题,现在针对两个系统总结出来两个解决方案:
安卓端:
在安卓端,当我们呼起键盘时,窗口的高度(document.documentElement.clientHeight)会改变,也就是会触发window.onresize事件,我们根据resize事件去做相关操作:
1.windows.resize事件被触发
2.判断是安卓 or ios
3.是安卓端,判断窗体默认可见高度 var client_h = document.documentElement.clientHeight; 是否比现在的窗体可见高度 var body_h = document.documentElement.clientHeight; 小
4.如果client_h > body_h ,则说明视口变小,fixed元素会被键盘顶起,此时需要将fixed定位改为static
5.当 client_h <= body_h 则说明键盘已收起,此时需要将static 定位改为 fixed 既可;
代码如下:
/**
* 键盘高度适配
*/
function fixedKeyboard() {
var client_h = document.documentElement.clientHeight;
$(window).on("resize",function(){
if (/iphone|ipad/i.test(navigator.userAgent.toLowerCase())) {
//ios这块什么都不用做
} else {
//安卓触发window.resize
var body_h = document.documentElement.clientHeight;
if(client_h > body_h){
$('.donwload-btn_fix').css('position','static')
console.log("ad小了");
}else{
$('.donwload-btn_fix').css('position','fixed')
console.log("ad正常")
}
}
})
}
IOS端:
1.input输入框获得焦点focus键盘弹起时,我们将fixed的元素隐藏display:none
2.当input框blur失去焦点键盘收起时,我们将fixed的元素恢复显示display:block
attractionNameBtn.on('input', function (e) {
// 用户输入时的逻辑
}).on('focus', function () {
iosKeyboard()
}).on('blur', function(){
$('.donwload-btn_fix').css('display','block') // input失焦后恢复fixed
})
/*ios键盘bug*/
function iosKeyboard() {
if (/iphone|ipad/i.test(navigator.userAgent.toLowerCase())) {
$('.donwload-btn_fix').css('display','none')
}
}