移动端键盘弹出影响布局的处理方法

这几天做了关于移动端的一些页面，发现了一些问题，在这记录下，备用也供大家参考下

1：移动端通过%布局，当页面出现键盘时，页面高度改变从而会压缩整个页面

（1）

  var viewHeight = window.innerHeight;
        $(document).ready(function () {
            var viewHeight = window.innerHeight;
            $().height(viewHeight)
            $().height(viewHeight * x%)
            $().height(viewHeight * y%)
        })

第一种方法，固定高度，在页面加载完成以后固定高度，后期键盘弹出就不会改变高度，并且也可以适应移动端布局

（2）

$().focus(function () {
        })

 $().blur(function () {
           
        })

第二种是通过判断input焦点的方向写的，有焦点时也就是键盘弹出，定义样式，失去焦点再重新定义样式

缺点是：焦点的判断是通过是否在输入，所以一直点击input但是滑动屏幕时，键盘会收回，但是触发不了第二个函数

（3）

var viewHeight = window.innerHeight;
$(window).resize(function () {  
      var thisHeight = $(this).innerHeight();  
      if (viewHeight - thisHeight > 50) {  
          //窗口发生改变(大),故此时键盘弹出  
          $().css()
      } else {  
          //窗口发生改变(小),故此时键盘收起   
          $().css()
      }  
  });

这种方法的思路是通过页面高度的变化来判断是否有键盘弹出，借用了jquery中的resize函数，界面尺寸改变时出发