【學習筆記】 關於 iOS Safari 的那些坑：禁止選取 & 縮放設定

A. 前言：進入 meta 元宇宙

<meta name="參數" content="具體參數值">

B. Zoom in/out on mobile device

B-0. user-scalable=no：禁止縮放畫面

• pinch：兩指縮放
• double-tap：雙擊縮放

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

// 等同於
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

• width=device-width：設定瀏覽器頁面的寬度同裝置的寬度，即自動符合不同手機螢幕預設的最佳解析度
• initial-scale=1.0：設定畫面初始縮放比例為 100%，即不放大也不縮小
• minimum-scale=1, maximum-scale=1：設定畫面最小和最大的縮放比例，均為 1 代表無法縮放
• user-scalable=0：不允許使用者改變縮放比例

To improve accessibility on websites in Safari, users can now pinch-to-zoom even when a website sets user-scalable=no in the viewport.

為了提高 Safari 網站中的輔助功能，即使在網站中的 viewport 設定 user-scalable=no，用戶仍可用手指進行縮放。

• CSS 屬性 touch-action: manipulation：禁止 double-tap
• 監聽 JS 事件 touchstart/touchend：禁止 pinch & double-tap
• 監聽 JS 事件gesturestart：禁止 pinch

B-1. CSS 解法：以 touch-action: manipulation 禁止 double-tap

html, body {
  touch-action: manipulation;
}

B-2. JS 解法：handle touchstart/touchend event

• touchstart：透過偵測 e.touches.length（觸控點數目）handle pinch 手勢

document.addEventListener('touchstart', (event) => {
    if (event.touches && event.touches.length > 1) {  // 禁止多指觸控
       event.preventDefault();
    }
  }, { passive: false });

• touchend：透過偵測點擊時間差 handle double-tap 手勢

let lastTouchEndTime = 0;
document.addEventListener('touchend', (event) => {
  const now = new Date().getTime();
  if((now - lastTouchEndTime) <= 300) {      // 偵測時間差是否小於 300ms
    event.preventDefault();
  }
  lastTouchEndTime = now;
}, false);

B-3. JS 解法：gesturestart event 兩指以上事件觸發

// [Safari only] gesturestart event: multi finger gestures touching 
  document.addEventListener('gesturestart', function(event) {
    // 阻止兩指縮放畫面
    event.preventDefault();
  });

C. 其他想記錄的

C-1. mouseEvent vs touchEvent vs gesturestart

• mouseEvent 一次只能有一個觸擊點
• touchEvent 支援多點觸控
• gesturestart 兩指以上觸碰時觸發，僅 iOS 支援

C-2. user-select: none：禁止區塊反白選取

* {
  user-select: none;
  -webkit-user-select: none; /* Chrome Safari */        
  -moz-user-select: none;    /* Firefox */
}

D. 小結

E. Reference

• html - How do you disable viewport zooming on Mobile Safari? - Stack Overflow
• “user-scalable=no”屬性被iOS Safari ignore的解決方法 | by 狗狗 | Medium
• 禁止Safari 中Double Tap 的縮小和放大. 在很多情況下 - Medium