关于移动端 禁止iphone手机双指放大

使用meta标签

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">

可惜这里只能在Android有效

使用JavaScript

• 要点event.cancelable此处的判断是为了解决在滚动的情况阻止默认事件会出现报错行为
• 报错示例

Intervention] Ignored attempt to cancel a touchend event with cancelable=false, for example because scrolling is in progress and cannot be interrupted.

• 代码片段

// 防止iphone 双指放大
window.onload = () => {
  document.addEventListener(
    'touchstart',
    (event) => {
      if (event.touches.length > 1) {
        if (event.cancelable) {
          event.preventDefault()
        }
      }
    },
    { passive: false }
  )

  let lastTouchEnd = 0
  document.addEventListener(
    'touchend',
    (event) => {
      const now = new Date().getTime()
      if (now - lastTouchEnd <= 300) {
        if (event.cancelable) {
          event.preventDefault()
        }
      }
      lastTouchEnd = now
    },
    { passive: false }
  )
}