2023-12-10 18:22:43 +03:00
|
|
|
<!doctype html>
|
2022-12-01 17:58:08 +03:00
|
|
|
<html lang="en">
|
|
|
|
|
<head>
|
2023-12-10 18:22:43 +03:00
|
|
|
<meta charset="UTF-8" />
|
|
|
|
|
|
|
|
|
|
<link rel="icon" href="/icons/android/android-launchericon-48-48.png" />
|
|
|
|
|
<link rel="apple-touch-icon" href="/icons/ios/192.png" />
|
|
|
|
|
|
2022-12-01 17:58:08 +03:00
|
|
|
<meta name="theme-color" content="#000000" />
|
2023-08-31 16:05:33 +03:00
|
|
|
<meta name="description" content="A modern open-source CRM" />
|
2022-12-01 17:58:08 +03:00
|
|
|
<meta
|
2023-08-31 16:05:33 +03:00
|
|
|
property="og:image"
|
|
|
|
|
content="https://raw.githubusercontent.com/twentyhq/twenty/main/docs/static/img/social-card.png"
|
2022-12-01 17:58:08 +03:00
|
|
|
/>
|
2023-08-31 16:05:33 +03:00
|
|
|
<meta property="og:description" content="A modern open-source CRM" />
|
|
|
|
|
<meta property="og:title" content="Twenty" />
|
|
|
|
|
<meta name="twitter:card" content="summary_large_image" />
|
|
|
|
|
<meta
|
|
|
|
|
name="twitter:image"
|
|
|
|
|
content="https://raw.githubusercontent.com/twentyhq/twenty/main/docs/static/img/social-card.png"
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
|
|
<meta name="twitter:description" content="A modern open-source CRM" />
|
|
|
|
|
<meta name="twitter:title" content="Twenty" />
|
2023-05-18 11:07:47 +03:00
|
|
|
<link
|
|
|
|
|
rel="stylesheet"
|
2023-12-10 18:22:43 +03:00
|
|
|
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap"
|
2023-05-18 11:07:47 +03:00
|
|
|
/>
|
2022-12-01 17:58:08 +03:00
|
|
|
|
2022-12-05 02:49:45 +03:00
|
|
|
<title>Twenty</title>
|
2023-12-10 18:22:43 +03:00
|
|
|
<script src="/env-config.js"></script>
|
Prevent automatic zoom when focusing inputs on iOS (#8477)
This is the result of a long discussion we had here:
https://github.com/twentyhq/twenty/issues/8001.
The goal is to stop iOS from automatically zooming when the user focuses
on an input whose font size is less than 16px.
The options were:
1. Disable zoom for all devices
2. Disable zoom for devices detected as iOS devices, which doesn't
prevent users from zooming manually but fixes the auto-zoom bug
3. Set the font size of the inputs to be equal to or greater than
16px—this change would take a lot of time
To me, the second option is the best, as iOS prevents developers from
disabling zoom. They saw that it was overused and chose to restrict this
setting. Setting a `maximum-scale` doesn't prevent users from zooming,
but it fixes the initial bug we had.
My implementation can be seen as [progressive
enhancement](https://developer.mozilla.org/en-US/docs/Glossary/Progressive_Enhancement
): If we can detect that the user uses an iOS device, we'll set the
`maximum-scale` viewport property. Relying on the user agent is always
unstable, and the check might fail unpredictably. We might not disallow
auto-zoom for some iOS devices.
However, I think we can either:
- Invest some time to choose a more reliable user detection pattern if
the one I suggest is not sufficient ([we find many different checks on
the
internet](https://stackoverflow.com/questions/9038625/detect-if-device-is-ios),
I'm not sure which one is the best)
- Choose to apply the viewport setting to all devices and remove the JS
code. According to my tests, it doesn't prevent zooming on desktops.
However, it does on Android phones. I think it's not lovely to disallow
zoom, but if the team agrees that we should go this way, I won't
disagree.
I know my JavaScript code does not follow a pattern we want to spread in
the app. The synchronous script will run as soon as possible to ensure
the viewport is correctly set when the website launches. This shouldn't
be an example followed by others.
Thanks, @harshit078, for your help in thinking about the best option.
I'm tagging @lucasbordeau and @charlesBochet for a technical review.
I would appreciate if someone could test on a more recent iOS device
than mine.
Here is a demonstration of the behavior on iOS:
https://github.com/user-attachments/assets/d49fb65f-dd76-455c-9ac0-d4c002a7fe89
2024-11-13 17:34:20 +03:00
|
|
|
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
|
|
|
<script type="module">
|
|
|
|
|
const disableInputAutoZoom = () => {
|
|
|
|
|
const viewportMetadata = document.querySelector('meta[name=viewport]');
|
|
|
|
|
|
|
|
|
|
if (viewportMetadata !== null) {
|
|
|
|
|
viewportMetadata.setAttribute('content', 'width=device-width, initial-scale=1.0, maximum-scale=1.0');
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const isIOS = /iPad|iPhone/.test(navigator.userAgent);
|
|
|
|
|
if (isIOS) {
|
|
|
|
|
disableInputAutoZoom();
|
|
|
|
|
}
|
|
|
|
|
</script>
|
2022-12-01 17:58:08 +03:00
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<noscript>You need to enable JavaScript to run this app.</noscript>
|
|
|
|
|
<div id="root"></div>
|
2023-12-10 18:22:43 +03:00
|
|
|
<script type="module" src="/src/index.tsx"></script>
|
2022-12-01 17:58:08 +03:00
|
|
|
</body>
|
|
|
|
|
</html>
|
