h5页面在ios系统出现的bug

1、el-select下拉框在上需要点击两次才能选中

解决方法：

.el-scrollbar {
  .el-scrollbar__bar {
    opacity: 1 !important;
  }
}

2、el-input聚焦时页面放大

解决方法1：meta

<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">

方法2：用JavaScript强制修改：

window.onload = function () {
  document.addEventListener('gesturestart', function (e) {
    e.preventDefault();
  });
  document.addEventListener('dblclick', function (e) {
    e.preventDefault();
  });
  document.addEventListener('touchstart', function (event) {
    if (event.touches.length > 1) {
      event.preventDefault();
    }
  });
  var lastTouchEnd = 0;
  document.addEventListener('touchend', function (event) {
    var now = (new Date()).getTime();
    if (now - lastTouchEnd <= 300) {
      event.preventDefault();
    }
    lastTouchEnd = now;
  }, false);
}

3、el-input文字超出不能滑动

解决方法：

<el-input
  v-model="dataForm.partEn"
  placeholder="请输入"
  :type="wapType == true ? 'textarea' : ''"
  autosize
></el-input>
//wapType判断是否是iso系统

以上是编程学习网小编为您介绍的“h5页面在ios系统出现的bug”的全面内容，想了解更多关于 vuejs 内容，请继续关注编程基础学习网。