沃梦达 / IT编程 / 前端开发 / 正文

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 内容,请继续关注编程基础学习网。

本文标题为:h5页面在ios系统出现的bug