h5页面在ios系统出现的bug

2024年06月07日 建站教程

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系统

本文链接:http://so.lmcjl.com/news/6117/

展开阅读全文
相关内容