今天碰到一个问题,由于没有使用移动端原生键盘,自己写了个键盘。导致在H5页面如果快速点击在IOS系统上会页面放大。而产品经理又必须要自制键盘,所以找了半天终于找到2种禁止IOS缩放的办法

  1. 利用判断两次按下时间间隔来禁止原生事件
  2. 在html中修改meta
    <meta name="viewport" content="width=device-width,initial-scale=1,mininmum-scale=1,maximum-scale=1,user-scalable=no" charset='UTF-8' />;
// 禁止移动端(IOS)双击页面变大
  let touchTime = 0;
  document.addEventListener('touchstart', function (event) {
    if (event.touches.length > 1) {
      event.preventDefault();
    }
  });
  document.addEventListener(
    'touchend',
    function (event) {
      //记录当前点击的时间与下一次时间的间隔
      const nowTime = new Date();
      if (nowTime.getTime() - touchTime <= 300) {
        event.preventDefault();
      }
      touchTime = nowTime.getTime();
    },
    false
  );