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

2022-03-10 14:04:53 阅读：459 来源： 互联网

标签：textarea clientHeight ios 键盘事件 input document 页面

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

标签：textarea,clientHeight,ios,键盘,事件,input,document,页面
来源： https://www.cnblogs.com/schaffery/p/15989177.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9