From ed5617a47a0cc71f053dc9a900c8f19ef5b10fd7 Mon Sep 17 00:00:00 2001 From: KoyoNoguchi Date: Wed, 21 Oct 2026 21:53:02 +0900 Subject: [PATCH] Block pinch and double-tap zoom, including on iOS Safari iOS Safari ignores user-scalable=no, so zoom is blocked in three layers: - viewport meta: maximum-scale=1, user-scalable=no on every page (covers Android, home-screen apps and iOS focus zoom on inputs) - CSS: touch-action: pan-x pan-y on html, so scrolling still works but pinch and double-tap zoom do not - JS (fluid.js): cancel Safari's gesture* events and two-finger touchmove Double-tap is left to CSS rather than JS so rapid repeated taps on buttons still register as clicks. Co-Authored-By: Claude Opus 5.5 --- admin/range.html | 2 +- admin/review.html | 2 +- public/assets/fluid.js | 16 ++++++++++++++++ public/assets/style.css | 4 +++- public/create.html | 2 +- public/key.html | 2 +- public/lobby.html | 2 +- public/table.html | 2 +- 8 files changed, 25 insertions(+), 7 deletions(-) diff --git a/admin/range.html b/admin/range.html index 8316551..5dd67ac 100644 --- a/admin/range.html +++ b/admin/range.html @@ -2,7 +2,7 @@ - + diff --git a/admin/review.html b/admin/review.html index fa029fa..3c2f2f9 100644 --- a/admin/review.html +++ b/admin/review.html @@ -2,7 +2,7 @@ - + diff --git a/public/assets/fluid.js b/public/assets/fluid.js index 48fb574..62f15e9 100644 --- a/public/assets/fluid.js +++ b/public/assets/fluid.js @@ -524,6 +524,22 @@ } } + // ---------- 拡大させない ---------- + // iOS Safari は viewport の user-scalable=no を無視するので、ピンチは gesture* イベントと + // 2本指の touchmove を止めて防ぐ。ダブルタップの拡大は CSS の touch-action で止めている + // （JS で 2回目のタップを止めると、素早い連打のクリックまで消えてしまうため） + const stopZoom = (e) => e.preventDefault(); + for (const type of ['gesturestart', 'gesturechange', 'gestureend']) { + document.addEventListener(type, stopZoom, { passive: false }); + } + document.addEventListener( + 'touchmove', + (e) => { + if (e.touches.length > 1) e.preventDefault(); + }, + { passive: false }, + ); + window.Fluid = { Spring, VelocityTracker, diff --git a/public/assets/style.css b/public/assets/style.css index ee44117..e97fab7 100644 --- a/public/assets/style.css +++ b/public/assets/style.css @@ -173,6 +173,8 @@ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--bg); + /* スクロールだけ許し、ピンチとダブルタップの拡大は止める（子の touch-action もこれに絞られる） */ + touch-action: pan-x pan-y; } body { @@ -1462,7 +1464,7 @@ body.page-table { display: flex; flex-direction: column; background: var(--room); - touch-action: manipulation; /* ダブルタップでの拡大を防ぐ（ピンチ拡大は残す） */ + touch-action: pan-x pan-y; /* ダブルタップ・ピンチでの拡大を防ぐ */ -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; diff --git a/public/create.html b/public/create.html index 1b39c97..8fd04a3 100644 --- a/public/create.html +++ b/public/create.html @@ -2,7 +2,7 @@ - + diff --git a/public/key.html b/public/key.html index 3f36539..a155190 100644 --- a/public/key.html +++ b/public/key.html @@ -2,7 +2,7 @@ - + diff --git a/public/lobby.html b/public/lobby.html index f6b700e..e022008 100644 --- a/public/lobby.html +++ b/public/lobby.html @@ -2,7 +2,7 @@ - + diff --git a/public/table.html b/public/table.html index 446d253..3adad62 100644 --- a/public/table.html +++ b/public/table.html @@ -2,7 +2,7 @@ - +