What code can I use to deactivate the zoom in on my phone when I focus on the form (text input) elements in Webflow?
- Set form input font sizes to at least 16px to stop iOS from auto-zooming.
- Optionally add a viewport meta tag (
user-scalable=0) to prevent zoom, but be cautious of accessibility impacts.
When you focus on form input fields (especially in forms with small font sizes), iOS devices auto-zoom in. You can prevent this by ensuring the font size is large enough and by adjusting the viewport meta tag.
1. Ensure Minimum Font Size is 16px
iOS Safari zooms in on form elements with font sizes smaller than 16px.
To prevent zooming, set a font size of at least 16px on all input, select, and textarea elements.
In Webflow, select the input elements and set:
Font size: 16px or larger
Do this for the mobile breakpoints to ensure consistency
2. Modify the Viewport Meta Tag
Webflow automatically includes a default viewport meta tag. To prevent zooming, use the following adjusted tag:
Go to Page Settings of the page you're editing
Scroll to Inside Head Tag
Add this code:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">This restricts user scaling, which disables pinch-to-zoom and automatic zoom.
3. Consider Accessibility
- Preventing zoom may negatively affect accessibility for visually impaired users.
- A better approach is often to just increase font size to 16px+, instead of locking zoom.
Summary
Set input font sizes to 16px or larger to prevent iOS auto-zoom, and optionally add a custom viewport meta tag to disable user zooming (though this may affect accessibility).