From 277c467bf8fd1c60b90a0c88f689101c528d0195 Mon Sep 17 00:00:00 2001 From: Jan Jaap Date: Tue, 28 Apr 2026 14:29:11 +0200 Subject: [PATCH] fix(web): prevent mobile pinch and input-focus zoom MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The viewport meta omitted maximum-scale and user-scalable, so iOS Safari auto-zoomed on input focus and let users pinch the chrome, both of which break the remote-control workflow over Tailscale on phones. Pin the viewport scale and disable user scaling. iOS Safari has historically ignored user-scalable=no for accessibility reasons, so the viewport meta alone isn't enough. Add `touch-action: pan-x pan-y` to html and body — this is the mechanism iOS does respect: pan/scroll still works, pinch-to-zoom is blocked. It only affects touch input, so desktop browsers are unchanged. Co-Authored-By: Claude Opus 4.7 (1M context) --- apps/web/index.html | 5 ++++- apps/web/src/index.css | 5 +++++ 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/apps/web/index.html b/apps/web/index.html index 9f0329b602..0d4d463a19 100644 --- a/apps/web/index.html +++ b/apps/web/index.html @@ -2,7 +2,10 @@ - + diff --git a/apps/web/src/index.css b/apps/web/src/index.css index 5c568ad5d6..c1cd8f0bbb 100644 --- a/apps/web/src/index.css +++ b/apps/web/src/index.css @@ -51,10 +51,15 @@ } html { background-color: var(--app-chrome-background); + /* iOS Safari ignores `user-scalable=no` in many contexts; touch-action + blocks pinch-zoom while still allowing pan/scroll. Touch-only input, + so desktop browsers are unaffected. */ + touch-action: pan-x pan-y; } body { @apply text-foreground relative; background-color: var(--app-chrome-background); + touch-action: pan-x pan-y; } }