Building a modern alternative to Salesforce, powered by the community.
Go to file
Baptiste Devessier 898006f89d
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 15:34:20 +01:00
.github Data settings new layout - anchor navigation (#8334) 2024-11-11 14:06:38 +01:00
.nx Add nxw.js file (#8362) 2024-11-06 14:24:07 +01:00
.vscode Secure connexion between TinyBird and webhookResponseGraph (#7913) 2024-10-21 17:42:52 +02:00
.yarn/releases removed @blocknote/core from dependencies (#6580) 2024-08-08 15:44:09 +02:00
packages Prevent automatic zoom when focusing inputs on iOS (#8477) 2024-11-13 15:34:20 +01:00
tools/eslint-rules feat: add eslint rule for enforcing WorkspaceService naming convention (#6308) 2024-07-19 19:17:57 +02:00
.dockerignore feat: merge front and server dockerfiles and optimize build (#4589) 2024-03-21 19:22:21 +01:00
.eslintrc.cjs 5421 box shadow on frozen header and first column (#6130) 2024-07-05 18:30:59 +02:00
.eslintrc.react.cjs Create ESLint rule to discourage usage of navigate() and prefer Link (#5642) 2024-06-04 17:04:57 +02:00
.gitignore add twenty-tinybird package (#8030) 2024-10-29 10:31:05 +01:00
.nvmrc Embrace nx monorepo structure with root package.json (#3255) 2024-01-05 14:59:58 +01:00
.prettierignore POC: chore: use Nx workspace lint rules (#3163) 2024-01-03 23:07:25 +01:00
.prettierrc POC: chore: use Nx workspace lint rules (#3163) 2024-01-03 23:07:25 +01:00
.vale.ini Fix vale ci (#3353) 2024-01-10 17:05:23 +01:00
.yarnrc.yml removed @blocknote/core from dependencies (#6580) 2024-08-08 15:44:09 +02:00
install.sh feat: generate secret function and replaced few instances (#7810) 2024-10-30 12:07:11 +01:00
jest.config.js POC: chore: use Nx workspace lint rules (#3163) 2024-01-03 23:07:25 +01:00
jest.preset.js POC: chore: use Nx workspace lint rules (#3163) 2024-01-03 23:07:25 +01:00
LICENSE feat(sso): allow to use OIDC and SAML (#7246) 2024-10-21 20:07:08 +02:00
Makefile update makefile rules to use docker run (#7747) 2024-10-16 14:32:58 +02:00
nx Migrate to a monorepo structure (#2909) 2023-12-10 18:10:54 +01:00
nx.json Migrate to twenty-ui - utilities/dimensions (#7949) 2024-10-23 17:09:32 +02:00
package.json o365 calendar sync (#8044) 2024-11-07 18:13:22 +01:00
README.md Remove oss.gg banner from README.md (#8275) 2024-11-01 11:28:56 +01:00
render.yaml feat: generate secret function and replaced few instances (#7810) 2024-10-30 12:07:11 +01:00
tsconfig.base.json refactor: move Checkmark, Avatar, Chip and Tooltip to twenty-ui (#4946) 2024-04-15 12:05:06 +02:00
yarn.lock o365 calendar sync (#8044) 2024-11-07 18:13:22 +01:00


Twenty logo

The #1 Open-Source CRM

Tailored to your unique business needs

🌐 Website · 📚 Documentation · Discord · Figma


Companies view


Weve spent thousands of hours grappling with traditional CRMs like Pipedrive and Salesforce to align them with our business needs, only to end up frustrated — customizations are complex and the closed ecosystems of these platforms can feel restrictive.

We felt the need for a CRM platform that empowers rather than constrains. We believe the next great CRM will come from the open-source community. Weve packed Twenty with powerful features to give you full control and help you run your business efficiently.


Demo

Go to demo.twenty.com and login with the following credentials:

email: tim@apple.dev
password: Applecar2025

See also:
🚀 Self-hosting
🖥️ Local Setup

Why Choose Twenty?

We understand that the CRM landscape is vast. So why should you choose us?

⛓️ Full control, Full Freedom: Contribute, self-host, fork. Break free from vendor lock-in and join us in shaping the open future of CRM.

📊 Data, Your Way: The days when the role of CRM platforms was to shift manual data entries to a database are over. Now, the data is already there. CRM 2.0 should be built around your data, allowing you to access and visualize any existing sources, not forcing you to retrofit your data into predefined objects on a remote cloud.

🎨 Effortlessly Intuitive: We set out to create something that we ourselves would always enjoy using. The main application draws inspiration from Notion, a tool known for its user-friendly interface and customization capabilities.


What You Can Do With Twenty

We're currently in the development phase of Twenty's alpha version.

Please feel free to flag any specific need you have need by creating an issue.

Below are some features we have implemented to date:

Add, filter, sort, edit, and track customers:

Companies view

Create one or several opportunities for each company:

Companies view

Track deals effortlessly with the email integration:

Companies view

Tailor your data model to meet business needs:

Companies view

See rich notes displayed in a timeline:

Companies view

Create tasks on records

Companies view

Companies view

Connect your CRM to all your tools through our APIs and Webhooks.

Companies view


What's In Store

Heres what you can look forward to:

Frequent updates: Were shipping fast! Expect regular updates and new features that enhance your experience.

🔗 Extensibility: Were putting the power in your hands. Soon, youll have the tools to extend and customize Twenty with plugins and more.


Join the Community