安卓 | IOS 键盘事件兼容

1,254 阅读1分钟

问题描述:

  • H5安卓拉起键盘时,会挤压页面,使页面布局变形缩小;
  • iOS拉起键盘后操作两次,底下会有一块留白;(好早以前了,没有图片了)

简单方案:

直接设置背景图高度即可,背景图不会发生变化

#html
<div><img src="@/assets/xxx-bg.png" ref="bg" :style="{ height }" /></div>

#JavaScript
mounted() {
  this.height = window.getComputedStyle(this.$refs.bg).height;
}

安卓:

安卓键盘拉起会占页面高度,类似百分比布局的话,页面就会被压缩,导致变形严重,可以采用当页面高度发生变化的时候,使下面的内容隐藏或者展示

#html -- 使用字符串形式来控制样式,这样就不用去获取节点了
<div :style="display">...</div>

#JavaScript
function androidFcous(){
  //安卓适配 键盘弹起页面压缩
  const u = navigator.userAgent;
  let _this = this;
  if (u.indexOf("Android") > -1 || u.indexOf("Linux") > -1) {
    //安卓手机
    // 获取视图原始高度
    let screenHeight = document.body.offsetHeight;
    // 为window绑定resize事件
    window.onresize = function() {
      let nowHeight = document.body.offsetHeight;
      if (nowHeight < screenHeight) {   //页面缩小, 弹出键盘,隐藏内容
        _this.display = "display: none";
      } else {
        //恢复正常展示内容
        _this.display = "";
      }
    };
  }
}

IOS:

IOS留白是因为键盘弹起之后,页面滞留了(个人理解),然后IOS又有一个弹性的拉伸,于是就自己偷偷长高了(留白了), 放在input的blur事件即可

function scrollTop(){ //键盘收起后就让页面拉到初始位置
    window.scroll(0, 0)
}

总结:

很多奇怪的兼容可以另辟蹊径,只要用户使用上不影响,可以换个思路,偷梁换柱.