Media Viewer: Fix pinch-to-zoom in PWA (#1428)

src/components/main/Main.tsx

@@ -27,7 +27,7 @@ import useShowTransition from '../../hooks/useShowTransition';
 import useBackgroundMode from '../../hooks/useBackgroundMode';
 import useBeforeUnload from '../../hooks/useBeforeUnload';
 import useOnChange from '../../hooks/useOnChange';
-import usePreventIosPinchZoom from '../../hooks/usePreventIosPinchZoom';
+import usePreventPinchZoomGesture from '../../hooks/usePreventPinchZoomGesture';
 import { processDeepLink } from '../../util/deeplink';
 import { LOCATION_HASH } from '../../hooks/useHistoryBack';
 
@@ -228,7 +228,7 @@ const Main: FC<StateProps & DispatchProps> = ({
   useBackgroundMode(handleBlur, handleFocus);
   useBeforeUnload(handleBlur);
 
-  usePreventIosPinchZoom(isMediaViewerOpen);
+  usePreventPinchZoomGesture(isMediaViewerOpen);
 
   function stopEvent(e: React.MouseEvent<HTMLDivElement, MouseEvent>) {
     e.preventDefault();

src/hooks/usePreventIosPinchZoom.ts

@@ -1,21 +0,0 @@
-import { useEffect } from '../lib/teact/teact';
-import { IS_IOS } from '../util/environment';
-
-export default function usePreventIosPinchZoom(isDisabled = false) {
-  // Disable viewport zooming on iOS Safari
-  useEffect(() => {
-    if (!IS_IOS || isDisabled) {
-      return undefined;
-    }
-
-    document.addEventListener('gesturestart', preventEvent);
-
-    return () => {
-      document.removeEventListener('gesturestart', preventEvent);
-    };
-  }, [isDisabled]);
-}
-
-function preventEvent(e: Event) {
-  e.preventDefault();
-}

src/hooks/usePreventPinchZoomGesture.ts

@@ -0,0 +1,40 @@
+import { useEffect } from '../lib/teact/teact';
+import { IS_IOS, IS_PWA, IS_TOUCH_ENV } from '../util/environment';
+
+const metaViewport = document.querySelector('meta[name="viewport"]');
+const defaultViewportContent = metaViewport?.getAttribute('content') || '';
+
+export default function usePreventPinchZoomGesture(isDisabled = false) {
+  useEffect(() => {
+    if (!IS_TOUCH_ENV) {
+      return undefined;
+    }
+
+    if (isDisabled) {
+      // Clean viewport content from values values that disable the ability to zoom a webpage
+      // https://web.dev/meta-viewport/
+      metaViewport?.setAttribute('content', 'width=device-width, initial-scale=1, shrink-to-fit=no');
+      return undefined;
+    }
+
+    metaViewport?.setAttribute('content', defaultViewportContent);
+
+    // Since iOS 10 `user-scaleable=no` is disabled in Safari for iOS,
+    // this is only applicable for the browser and does not apply to the PWA mode.
+    // https://newbedev.com/how-do-you-disable-viewport-zooming-on-mobile-safari
+    if (IS_IOS && !IS_PWA) {
+      document.addEventListener('gesturestart', preventEvent);
+    }
+
+    return () => {
+      metaViewport?.setAttribute('content', 'width=device-width, initial-scale=1, shrink-to-fit=no');
+      if (IS_IOS && !IS_PWA) {
+        document.removeEventListener('gesturestart', preventEvent);
+      }
+    };
+  }, [isDisabled]);
+}
+
+function preventEvent(e: Event) {
+  e.preventDefault();
+}