1

src/mobileViewportZoomLock.ts

@@ -0,0 +1,58 @@
+const MOBILE_POINTER_QUERY = '(pointer: coarse)';
+const QUICK_TAP_INTERVAL_MS = 300;
+
+function shouldLockMobileViewportZoom() {
+  if (typeof window === 'undefined' || typeof navigator === 'undefined') {
+    return false;
+  }
+
+  return (
+    navigator.maxTouchPoints > 1 ||
+    window.matchMedia(MOBILE_POINTER_QUERY).matches
+  );
+}
+
+/**
+ * 中文注释：主站在移动端采用游戏式固定画布，不能让浏览器把整页缩放。
+ * 单指滚动、点击仍交给页面自身处理，只拦截多指捏合和快速双击触发的页面级缩放。
+ */
+export function lockMobileViewportZoom() {
+  if (
+    typeof document === 'undefined' ||
+    !shouldLockMobileViewportZoom() ||
+    document.documentElement.dataset.mobileViewportZoomLocked === 'true'
+  ) {
+    return;
+  }
+
+  document.documentElement.dataset.mobileViewportZoomLocked = 'true';
+
+  const nonPassiveOptions: AddEventListenerOptions = { passive: false };
+  let lastTouchEndAt = 0;
+
+  const preventMultiTouchZoom = (event: TouchEvent) => {
+    if (event.touches.length > 1) {
+      event.preventDefault();
+    }
+  };
+
+  const preventBrowserGestureZoom = (event: Event) => {
+    event.preventDefault();
+  };
+
+  const preventQuickTapZoom = (event: TouchEvent) => {
+    const now = Date.now();
+
+    if (now - lastTouchEndAt < QUICK_TAP_INTERVAL_MS) {
+      event.preventDefault();
+    }
+
+    lastTouchEndAt = now;
+  };
+
+  document.addEventListener('touchmove', preventMultiTouchZoom, nonPassiveOptions);
+  document.addEventListener('touchend', preventQuickTapZoom, nonPassiveOptions);
+  document.addEventListener('gesturestart', preventBrowserGestureZoom, nonPassiveOptions);
+  document.addEventListener('gesturechange', preventBrowserGestureZoom, nonPassiveOptions);
+  document.addEventListener('gestureend', preventBrowserGestureZoom, nonPassiveOptions);
+}