diff --git a/packages/web/src/javascripts/App.tsx b/packages/web/src/javascripts/App.tsx index a2e4b775f..261a276a7 100644 --- a/packages/web/src/javascripts/App.tsx +++ b/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 } } @@ -73,6 +76,8 @@ const startApplication: StartApplication = async function startApplication( window.addEventListener('resize', setViewportHeight) window.addEventListener('orientationchange', setViewportHeight) + disableIosTextFieldZoom() + root.render( { 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() + } +}