From 7b490d8bcdac2ddc5575e0a5d575417722e42989 Mon Sep 17 00:00:00 2001
From: Samuel Newman <mozzius@protonmail.com>
Date: Thu, 23 Apr 2026 20:42:05 +0300
Subject: [PATCH] Only lock viewport zoom while text inputs are focused
 (#10340)

Co-authored-by: Claude <noreply@anthropic.com>
---
 bskyweb/templates/base.html           |  2 +-
 src/lib/hooks/useViewportZoomLock.ts  | 71 +++++++++++++++++++++++++++
 src/screens/Messages/Conversation.tsx |  3 ++
 web/index.html                        |  2 +-
 4 files changed, 76 insertions(+), 2 deletions(-)
 create mode 100644 src/lib/hooks/useViewportZoomLock.ts
diff --git a/bskyweb/templates/base.html b/bskyweb/templates/base.html
index e04047ced4..e33479e697 100644
--- a/bskyweb/templates/base.html
+++ b/bskyweb/templates/base.html
@@ -2,7 +2,7 @@
 <html>
 <head>
   <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, viewport-fit=cover">
+  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, viewport-fit=cover">
   <meta name="referrer" content="origin-when-cross-origin">
   <!--
     Preconnect to essential domains
diff --git a/src/lib/hooks/useViewportZoomLock.ts b/src/lib/hooks/useViewportZoomLock.ts
new file mode 100644
index 0000000000..c91363c364
--- /dev/null
+++ b/src/lib/hooks/useViewportZoomLock.ts
@@ -0,0 +1,71 @@
+import {useEffect} from 'react'
+
+import {IS_WEB_MOBILE_IOS} from '#/env'
+
+const ZOOM_LOCKED_VIEWPORT =
+  'width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, viewport-fit=cover'
+
+/**
+ * iOS Safari zooms in when a text input with `font-size < 16px` gains focus.
+ * To avoid that while still allowing users to pinch-zoom for accessibility, we
+ * only pin `maximum-scale=1` while a text input is focused and restore the
+ * original viewport on blur.
+ *
+ * Listeners run in the capture phase so we update the viewport before iOS
+ * commits to auto-zooming the input.
+ */
+export function useViewportZoomLock({enabled} = {enabled: true}) {
+  useEffect(() => {
+    if (!IS_WEB_MOBILE_IOS) return
+    if (!enabled) return
+
+    const meta = document.querySelector('meta[name="viewport"]')
+    if (!(meta instanceof HTMLMetaElement)) return
+
+    const originalContent = meta.content
+
+    const onFocus = (e: FocusEvent) => {
+      if (isTextInput(e.target)) {
+        meta.content = ZOOM_LOCKED_VIEWPORT
+      }
+    }
+
+    const onBlur = (e: FocusEvent) => {
+      if (isTextInput(e.target)) {
+        meta.content = originalContent
+      }
+    }
+
+    document.addEventListener('focus', onFocus, true)
+    document.addEventListener('blur', onBlur, true)
+
+    return () => {
+      document.removeEventListener('focus', onFocus, true)
+      document.removeEventListener('blur', onBlur, true)
+      meta.content = originalContent
+    }
+  }, [enabled])
+}
+
+const NON_TEXT_INPUT_TYPES = new Set([
+  'button',
+  'checkbox',
+  'color',
+  'file',
+  'hidden',
+  'image',
+  'radio',
+  'range',
+  'reset',
+  'submit',
+])
+
+function isTextInput(target: EventTarget | null): boolean {
+  if (!(target instanceof HTMLElement)) return false
+  if (target.isContentEditable) return true
+  if (target instanceof HTMLTextAreaElement) return true
+  if (target instanceof HTMLInputElement) {
+    return !NON_TEXT_INPUT_TYPES.has(target.type)
+  }
+  return false
+}
diff --git a/src/screens/Messages/Conversation.tsx b/src/screens/Messages/Conversation.tsx
index 39d28a6969..e0a6fd0794 100644
--- a/src/screens/Messages/Conversation.tsx
+++ b/src/screens/Messages/Conversation.tsx
@@ -18,6 +18,7 @@ import {type NativeStackScreenProps} from '@react-navigation/native-stack'
 import {RemoveScrollBar} from 'react-remove-scroll-bar'
 
 import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback'
+import {useViewportZoomLock} from '#/lib/hooks/useViewportZoomLock'
 import {
   type CommonNavigatorParams,
   type NavigationProp,
@@ -106,6 +107,8 @@ function Inner({convoId}: {convoId: string}) {
   const {top: topInset} = useSafeAreaInsets()
   const {data: convoData} = useConvoQuery({convoId})
 
+  useViewportZoomLock({enabled: isFocused})
+
   const convo = convoData
     ? parseConvoView(convoData, currentAccount?.did)
     : null
diff --git a/web/index.html b/web/index.html
index d8f2462f2c..67500c1d21 100644
--- a/web/index.html
+++ b/web/index.html
@@ -9,7 +9,7 @@
      -->
     <meta
       name="viewport"
-      content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, viewport-fit=cover"
+      content="width=device-width, initial-scale=1, minimum-scale=1, viewport-fit=cover"
     />
     <!--
       Preconnect to essential domains
