关于input调用移动端键盘的问题

今天小编想来讲一讲上周项目开发中遇到的一个小问题，但是大家开发过程中可能经常遇到的问题，input输入框兼容性。

其实这个问题已经不是第一次遇到，之前移动端开发过程中遇到在安卓手机点击输入框时会把后面的背景以及底部导航给挤压上去，不但影响输入，而且特别特别特别的丑，完全影响了正好页面。上周开发过程中，同样的问题又出现了，请看下面截图，ios是完美适配，但是安卓。。。。。。惨不忍睹。
安卓
ios
遇到问题，解决问题。于是小编就上网搜索了一些关键词，但是发现，基本都是一些。。。。。。哈哈哈，是的，吃瓜群众比较多。无奈，只能另想途径，然后就开始布局，测试，关于底部导航用浮动元素的，的确会遮挡输入框，会被挤压上去，最后一方法，虽然不治本，但是还是能完美解决。
解决后得安卓
贴上代码：

$(function () {

    var u = navigator.userAgent, app = navigator.appVersion;

    var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //g

    var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端

    if (isAndroid) {

       //这个是安卓操作系统

        var wHeight1 = window.innerHeight;   //获取初始可视窗口高度

        $(window).resize(function(){

          var wHeight3 = window.innerHeight;

          if(wHeight3 < wHeight1){

            $(".phoneBox,.subBtn,.return,.makeSure").hide();

          }else if(wHeight3 == wHeight1){

            $(".phoneBox,.subBtn,.return,.makeSure").show();

          }

        })

    }

    if (isIOS) {

　　　　//这个是ios操作系统

    }

});

就是获取初始可视窗口的高度，然后点击输入框时再次获取可视窗口高度，通过控制底部导航的显隐，来控制界面的元素。对，就是这几行代码，完美解决，当然，你有更好的方法，欢迎留言分享奥。