解决移动端点击输入框时，弹起的输入法会将底部的固定按钮顶起来

在写一个一定段H5页面的时候，中间有输入框，底部有固定按钮，在点击输入框时，你就会看到奇怪的事情，我固定在底部的fixed部分被输入法顶起来了：

1.jpg

方法一:
动态监控浏览器窗口的变化。当浏览器窗口的大小发生变化时，如果变化后的窗口高度小于初始的窗口高度，则让底部隐藏起来；反之，则让底部分正常显示，代码展示：

var win_h = $(window).height();//关键代码
window.addEventListener('resize', function () {
    if($(window).height() < win_h){
        $('.share-btn-box').hide();
    }else{
        $('.share-btn-box').show();
    }
});

但是这个方法有个缺陷，在安卓手机中没有任何问题，但是在苹果手机中无法看到固定在底部的内容，原因就是苹果手机底部有自带的工具栏，这个会影响JS对浏览器可视窗口高度的判断，JS会认为当前可视窗口高度小于整个手机窗口的高度，就会将底部的内容隐藏掉，和输入法弹起时是一样的效果，所以最后就是在苹果手机中会看不到固定在底部的内容。

方法二：

//navigator.userAgent.indexOf用来判断浏览器类型
var isAndroid = navigator.userAgent.indexOf('Android') > -1 || navigator.userAgent.indexOf('Adr') > -1;
if (isAndroid){//如果是安卓手机的浏览器
    var win_h = $(window).height();//关键代码
    $("body").height(win_h);//关键代码
    window.addEventListener('resize', function () {
        // Document 对象的activeElement 属性返回文档中当前获得焦点的元素。
        if (document.activeElement.tagName === 'INPUT' || document.activeElement.tagName === 'TEXTAREA') {
          if($('.share-btn-box').is(':visible')){
            $('.share-btn-box').hide();
          }else{
            $('.share-btn-box').show();
          }
        }
    });
}

效果图如下：

2.jpg

第二种更加全面，所以肯定推荐第二种呀！