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

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

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函数,界面尺寸改变时出发




阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/aliujiujiang/article/details/79950861
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭