问题描述

工作做了一个手机使用编辑器编辑文章的功能，ios弹出键盘，不能将编辑器顶上去。安卓端没有问题。

原因分析：

苹果弹出功能并不会将视口变小，从而导致虚拟键盘将编辑器覆盖，安卓的处理是将视口变小，将编辑器顶在虚拟键盘之上。

解决方案：

使用window.visualViewport监听高度变化，当高度小于视口高度说明虚拟键盘弹出，用视口高度减去头部以及visualViewport高度就得到了键盘高度。

// 使用window.visualViewport来监听高度变化
    keyboardUp () {
      var u = navigator.userAgent;
      var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
      const innerH = window.innerHeight
      if(isIOS){
        const handler = ()=>{
          if(!window.visualViewport) return
          const height = window.visualViewport.height
          this.elEditor.then(res=>{
            if(height < innerH) {
              res.style.bottom = (innerH-height-67)+'px'
            }else if(height == innerH) {
              res.style.bottom = 0
            }
          })
        }
        window.visualViewport.addEventListener('resize',handler)
      }
    }