ios系统 input/textarea导致页面放大

一、ios系统 input/textarea导致页面放大

正常你能百度到的是如下：

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">

属性拆解说明：

　　viewport meta标签：浏览器的viewport指的是 可以看到 Web 内容的窗口区域，通常与渲染出的页面的大小不同，这种情况下，浏览器会提供滚动条以滚动访问所有内容。

　　width属性：控制视口的宽度。可以像width=600这样设为确切的像素数，或者设为device-width特殊值，代表缩放为100%时以CSS像素计量的屏幕宽度。

　　                   相应的也有height属性及device-height属性，对包含基于视口高度调整大小及位置的元素的页面有用。 

　　initial-scale属性：页面最初加载时的缩放等级，即当页面第一次load的时候的缩放比例。

　　maximum-scale属性：允许用户缩放到的最大比例。

　　minimum-scale属性：允许用户缩放到的最小比例。

　　user-scalable属性：用户是否可以手动缩放。

但是实际上，这是移动端开发必须写的。禁止网页放大缩小。

再深层次一点，你能看见：

//当页面加载完成后触发该函数
    window.onload = function () {
      //e.preventDefault() --- 阻止默认事件
      //当一个手指放在屏幕上时，会触发touchstart事件。如果另一个手指又放在了屏幕上，则会先触发gesturestart事件，随后触发基于该手指的touchstart事件。
      document.addEventListener('gesturestart', function (e) {
        e.preventDefault();
      });

      //在单个元素上单击两次 --- dblclick
      document.addEventListener('dblclick', function (e) {
        e.preventDefault();
      });

      //一个手指放在屏幕上时，会触发touchstart事件
      document.addEventListener('touchstart', function (event) {
        if (event.touches.length > 1) {
          event.preventDefault();
        }
      });

      //如果一个或两个手指在屏幕上滑动，将会触发gesturechange事件
      //但只要有一个手指移开，则会触发gestureend事件，紧接着又会触发toucheend事件。
      var lastTouchEnd = 0;
      document.addEventListener('touchend', function (event) {
        var now = (new Date()).getTime();
        if (now - lastTouchEnd <= 300) {
          event.preventDefault();
        }
        lastTouchEnd = now;
      }, false);
    };

这个我测试是没有效果的，也贴在博客里，万一哪天需要了或者别人使用生效了呢。

最终解决方案：

ids设计者认为，只有input/textarea中的字体大于等于 16px 时用户才能看得清楚，所以当你移动端输入的字体小于16px时，会自动放大，且失焦后不会复原。（于此引申出来一个解决办法：失焦后复原页面。）
所以可以通过设置字体大小来阻止页面放大：

input, input:focus,
textarea, textarea:focus,
select, select:focus, {
        font-size: 16px !important;
}

二、 ios的select、input、样式显示与安卓不同

可以用-webkit-appearance:none

三、阻止ios软键盘将页面顶上去无法恢复的问题

<input type="text" class="text" onblur="inputBlur()">
 
function inputBlur(){
    let u = navigator.userAgent
    let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)
    if (isIOS) {
        setTimeout(() => {
            const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0;
            window.scrollTo(0, Math.max(scrollHeight - 1, 0))
        }, 200)
    }
}

四、Input/Textarea唤起键盘页面偏移

现象：

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})
  }