What code can I use to deactivate the zoom in on my phone when I focus on the form (text input) elements in Webflow?
- Add a viewport meta tag in Webflow’s Custom Code head section to disable scaling:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> - Set all input and textarea font sizes to at least 16px in Webflow Designer to prevent auto-zoom on focus.
To prevent mobile zoom when focusing on a form input in a Webflow project, you can adjust your viewport settings using custom code.
1. Use viewport meta tag with proper scale settings
Go to Webflow and open your project.
Click on Project Settings > Custom Code > Head Code.
Add this meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">This setting disables pinch-to-zoom and prevents browser from auto-zooming when focusing inputs.
2. Set font-size to at least 16px for form fields
- Browsers like Safari on iOS auto-zoom when focusing on text inputs smaller than 16px, to improve readability.
- In the Webflow Designer:
- Select your Input, Textarea, or Form field elements.
- Set the font size to 16px or more under the Typography section.
3. Optional: Add CSS to override iOS styles (use responsibly)
If necessary, you can embed light custom CSS under Custom Code > Head Code:
<style>input, textarea { font-size: 16px !important; }</style>Use this only if multiple input styles vary and you need a universal update.
Summary
To stop mobile zoom when focusing form fields, set the viewport tag to disable scaling, and ensure all input field fonts are at least 16px. This avoids triggering zoom behaviors on mobile browsers, especially on iOS.