ztr/TelegramPWA
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Disable Pinch Zoom on iOS (#1369)

Browse Source
This commit is contained in:
Alexander Zinchuk 2021-08-16 14:21:24 +03:00
parent af8248dcf2
commit 66b8a2803c
3 changed files with 25 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/main/Main.tsx
View File

@ -27,6 +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 { processDeepLink } from '../../util/deeplink';
import { LOCATION_HASH } from '../../hooks/useHistoryBack';
@ -222,6 +223,8 @@ const Main: FC<StateProps & DispatchProps> = ({
useBackgroundMode(handleBlur, handleFocus);
useBeforeUnload(handleBlur);
usePreventIosPinchZoom(isMediaViewerOpen);
function stopEvent(e: React.MouseEvent<HTMLDivElement, MouseEvent>) {
e.preventDefault();
e.stopPropagation();

21
src/hooks/usePreventIosPinchZoom.ts Normal file
View File

@ -0,0 +1,21 @@
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();
}

2
src/index.html
View File

@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-title" content="Telegram WebZ">
<meta name="application-name" content="Telegram WebZ">