移动端技术问题 — H5页面底部弹出页input输入时整个弹出页被输入法顶起的解决方法

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、总结

        建议使用第一种方法，可兼容大部分手机，体验较好
        第二种方法，因为手机屏幕大小不一样以及手机输入法窗口不一样，部分手机输入法遮盖弹出页部分过多，体验不好