解决手机端微信公众号内input输入框获取焦点后，底部导航栏显示在输入法软键盘上面的问题

今天遇到在微信公众号中打开网站,input 输入框和textarea输入框获取焦点后，弹出输入法键盘，将底部的导航栏”顶到“输入法键盘上面的问题，看着非常shit！

直接上代码看效果 

        var clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
        $(window).on('resize', function (e) {
            var nowClientHeight = document.documentElement.clientHeight || document.body.clientHeight;
            if (clientHeight > nowClientHeight) {
                //键盘弹出的事件处理，隐藏底部导航栏
                $("#plugin-contact-ring2").hide();
            }
            else {
                //键盘收起的事件处理，显示底部导航栏
                $("#plugin-contact-ring2").show();
            }
        });

我之前想到的一种方案是通过焦点事件来控制导航栏的显示与隐藏，这种方案有一个弊端：针对多个input或textarea需要来回切换，这样导航栏频繁显示和隐藏，体验更差，因此放弃了这种方案！

之前在粮食公司同样遇到这种方案，当时的PM给出的解决方案是：在需要输入的页面，隐藏掉底部导航栏，这种情况更蛋疼，要知道，当时的项目至少有几十个页面，改起来贼蛋疼，现在的方案，只需要放在layout母版页中即可。