fullpage插件在移动端弹出键盘页面特殊处理

Posted on 2017-11-19 11:47  陈小鑫  阅读(555)  评论(0编辑  收藏  举报

fullpage插件大家都很熟悉 jquery一款全屏上下滑动的插件。

最近做公司一个活动移动端使用fullpage插件填写input的时候遇见一个问题,手机自带的键盘弹出的时候会把页面顶出去,页面错版,当时也是熬夜解决这个问题,首先想到的是键盘收起时重新给页面赋值高度,处理失败,fullpage插件会强迫重新复制给页面高度,

等等一些方法赋值都不行,最后跟同事一起想办法解决掉了 ,so~话不多说分享给大家我认为正确的解决办法,希望遇到此问题的前端朋友能更快处理。

$(function(){
$('#scrollpage').fullpage({
verticalCentered: false,
});

//安卓手机输入框弹出键盘特殊处理

//ios手机是不会出现这样的问题,所以要区分出来
var isModel = navigator.userAgent;
var isAndroid = isModel.indexOf('Android') > -1 || isModel.indexOf('Adr') > -1; //android终端 
if(isAndroid==true){ 
var clientHeight = document.documentElement.clientHeight || document.body.clientHeight; $(window).on('resize', function () {
var nowClientHeight = document.documentElement.clientHeight || document.body.clientHeight;
if (clientHeight > nowClientHeight) {
//键盘弹出的事件处理

//强制给页面向上订出一个键盘的高度
$('.fp-section').css('top', '-28%');
}
else {
//键盘收起的事件处理
$('.fp-section').css('top', '0');
}
});
}

});