Viewport Meta Tag Generator
Generate the responsive viewport meta tag with device-width, initial scale, and zoom options. Free and instant.
Independently verified for accuracy
Calculator by Toolsloft ↗Generate the viewport meta tag that makes a page render correctly on phones and tablets. Pick your initial scale and zoom settings and copy the tag into your page head.
How this is calculated
It builds the standard responsive viewport meta tag with width set to device-width, the value the mobile web is built around. It appends initial-scale, an optional maximum-scale, and user-scalable=no only when you turn zooming off, following the HTML viewport specification.
How to use
- Set the initial scale, usually 1.
- Optionally set a maximum scale and choose whether users can zoom.
- Copy the meta tag into the head of your page.
Examples
- Standard responsive default:
width=device-width, initial-scale=1 - Zoom locked:
adds maximum-scale=1, user-scalable=no
FAQ
- What does width=device-width do?
- It tells the browser to match the layout width to the device screen width instead of assuming a desktop-sized page. Without it, mobile browsers render a zoomed-out desktop layout, which is why responsive sites always include it.
- Should I disable zooming?
- Usually not. Turning off user-scalable can hurt accessibility for people who need to zoom in, so most sites leave zooming enabled. Only disable it for specific interfaces like maps where pinch gestures are handled in the app.