fix: disable zoom on input focusing on ios (#1386)

* fix: disable zoom when focusing input field on ios

* chore: better naming

packages/web/src/javascripts/App.tsx

@@ -1,5 +1,7 @@
 'use strict'
 
+import { disableIosTextFieldZoom } from '@/Utils'
+
 declare global {
   interface Window {
     dashboardUrl?: string
@@ -19,6 +21,7 @@ declare global {
 
     application?: WebApplication
     mainApplicationGroup?: ApplicationGroup
+    MSStream?: Record<string, unknown>
   }
 }
 
@@ -73,6 +76,8 @@ const startApplication: StartApplication = async function startApplication(
     window.addEventListener('resize', setViewportHeight)
     window.addEventListener('orientationchange', setViewportHeight)
 
+    disableIosTextFieldZoom()
+
     root.render(
       <ApplicationGroupView
         key={getKey()}

packages/web/src/javascripts/Utils/Utils.ts

@@ -1,6 +1,7 @@
 import { Platform, platformFromString } from '@standardnotes/snjs'
 import { IsDesktopPlatform, IsWebPlatform } from '@/Constants/Version'
 import { EMAIL_REGEX } from '../Constants/Constants'
+
 export { isMobile } from './IsMobile'
 
 declare const process: {
@@ -170,3 +171,33 @@ export const openInNewTab = (url: string) => {
 export const convertStringifiedBooleanToBoolean = (value: string) => {
   return value !== 'false'
 }
+
+// https://stackoverflow.com/a/57527009/2504429
+export const disableIosTextFieldZoom = () => {
+  const addMaximumScaleToMetaViewport = () => {
+    const viewportMetaElement = document.querySelector('meta[name=viewport]')
+
+    if (viewportMetaElement !== null) {
+      let content = viewportMetaElement.getAttribute('content')
+      if (!content) {
+        return
+      }
+      const maximumScaleRegex = /maximum-scale=[0-9.]+/g
+
+      if (maximumScaleRegex.test(content)) {
+        content = content.replace(maximumScaleRegex, 'maximum-scale=1.0')
+      } else {
+        content = [content, 'maximum-scale=1.0'].join(', ')
+      }
+
+      viewportMetaElement.setAttribute('content', content)
+    }
+  }
+
+  // https://stackoverflow.com/questions/9038625/detect-if-device-is-ios/9039885#9039885
+  const checkIsIOS = () => /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream
+
+  if (checkIsIOS()) {
+    addMaximumScaleToMetaViewport()
+  }
+}