fix: prevent iOS zoom on input focus and pinch-to-zoom

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/web/public/app.js

@@ -224,6 +224,14 @@ const MobileDetection = {
       resizeTimeout = setTimeout(() => this.updateBodyClass(), 100);
     };
     window.addEventListener('resize', this._resizeHandler);
+
+    // iOS: prevent pinch-to-zoom (Safari ignores user-scalable=no since iOS 10)
+    if (this.isIOS()) {
+      this._gestureStartHandler = (e) => e.preventDefault();
+      this._gestureChangeHandler = (e) => e.preventDefault();
+      document.addEventListener('gesturestart', this._gestureStartHandler);
+      document.addEventListener('gesturechange', this._gestureChangeHandler);
+    }
   },
 
   /** Remove event listeners */
@@ -232,6 +240,12 @@ const MobileDetection = {
       window.removeEventListener('resize', this._resizeHandler);
       this._resizeHandler = null;
     }
+    if (this._gestureStartHandler) {
+      document.removeEventListener('gesturestart', this._gestureStartHandler);
+      document.removeEventListener('gesturechange', this._gestureChangeHandler);
+      this._gestureStartHandler = null;
+      this._gestureChangeHandler = null;
+    }
   }
 };
 

src/web/public/mobile.css

@@ -20,6 +20,24 @@ html.mobile-init .file-browser-panel {
   display: none !important;
 }
 
+/* ============================================================================
+   iOS Zoom Prevention (all mobile/tablet sizes)
+   iOS Safari ignores user-scalable=no since iOS 10.
+   font-size >= 16px on inputs prevents auto-zoom on focus.
+   touch-action: manipulation prevents double-tap zoom.
+   ============================================================================ */
+@media (max-width: 768px) {
+  /* Prevent iOS auto-zoom on input focus (triggers at font-size < 16px) */
+  input, textarea, select {
+    font-size: 16px !important;
+  }
+
+  /* Prevent double-tap zoom globally */
+  html {
+    touch-action: manipulation;
+  }
+}
+
 /* ============================================================================
    Tablet Breakpoint (430px - 768px)
    ============================================================================ */

src/web/public/upload.html

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en"><head>
 <meta charset="utf-8">
-<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
+<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
 <title>Upload Screenshot - Claudeman</title>
 <style>
   * { box-sizing: border-box; margin: 0; padding: 0; }