IOS手机Input/Textarea唤起键盘页面偏移和放大的解决方法

在家里办公的弊端就是需要测试机的时候一筹莫展，奈何公司的在线模拟网络设备平台又不具备ios的多种手机型号，遇到这种兼容性的问题真是头大,趁着晚上洗完澡，本该躺着刷刷抖音，想到那几天遇到的ios兼容性的坑，忍不住打开电脑记录下吧。

先描述下现象吧

1、ios手机键盘唤起时，把页面高度顶上去，键盘收起时，页面高度回不来了
2、ios键盘唤起时页面左右移动，页面悬浮部分无法点击

解决方法：

1、首先要监听页面键盘事件

state={
  clientHeight: 0,
}
componentDidMount() {
    const clientHeight = document.documentElement.clientHeight || document.body.clientHeight
    this.setState({ clientHeight })
    window.addEventListener('resize', this.resize)
  }
  resize = () => {
    const clientHeight = document.documentElement.clientHeight || document.body.clientHeight
    if (this.state.clientHeight > clientHeight) { // 键盘弹出
      this.inputClickHandle()
    } else { // 键盘收起
      this.inputBlurHandle()
    }
  }
  componentWillUnmount() {
    window.removeEventListener('resize', this.resize) // 移除监听
  }
   inputClickHandle = () => {
    // 这里处理键盘弹出的事件
  }

  inputBlurHandle = () => {
    this.fixKeyboardViewHeight()
    // 这里处理键盘收起的事件
  }
  

2、在页面失去焦点的时候出发拉取页面高度的操作

const fixKeyboardViewHeight = () => {
  setTimeout(() => {
    let currentPosition = document.documentElement.scrollTop || document.body.scrollTop
    currentPosition -= 1
    window.scrollTo(0, currentPosition)
    currentPosition += 1
    window.scrollTo(0, currentPosition)
    // clearTimeout(timer)
  }, 100)
}

3、给页面上输入框(input或textarea)加上获取焦点和失去焦点的键盘事件

    <input 
       value={this.state.inputValue}
       onClick={() => { this.inputClickHandle() }}
       onBlur={() => { this.inputBlurHandle() }}
       onFocus={() => { this.inputClickHandle() }}
       onChange={(e) => {
         this.changeInputValue(e)
       }}
       />

4、如果页面上出现悬浮的部分，类似于吸底按钮或者弹窗之类的，可以定义一个变量，键盘唤起时隐藏，键盘收起时复原

    state={
      show:true
    }
     inputClickHandle = () => {
    // 这里处理键盘弹出的事件
    this.setState({show:false})
  }

  inputBlurHandle = () => {
    this.fixKeyboardViewHeight()
    // 这里处理键盘收起的事件
    this.setState({show:true})
  }

以上就是完整的解决方法啦，就是这么简单，收拾下睡觉咯