Meta Viewport Generator

What is the Viewport Meta Tag?

The viewport meta tag tells mobile browsers how to control the page's dimensions and scaling. Without it, phones render pages at a wide desktop width and zoom out, making text tiny and unreadable. The tag is the foundation of responsive web design and belongs in the head of every modern web page.

Our Meta Viewport Generator builds the tag for you. Start from a preset like the recommended responsive default, then fine-tune the initial scale, maximum scale, zoom permission, and viewport-fit for notched devices — and copy the ready-to-use HTML.

How to Use the Generator

• Choose a preset such as Responsive, Disable zoom, or Notch / safe area
• Adjust the initial scale and optional maximum scale
• Keep user zoom enabled for accessibility unless you have a specific reason not to
• Set viewport-fit to cover for edge-to-edge layouts on notched phones
• Copy the generated meta tag into your page's head section

Viewport Settings Explained

width=device-width tells the browser to match the page width to the device's screen width — the cornerstone of responsiveness. initial-scale=1 sets the starting zoom level so the page is shown at a natural size. maximum-scale and user-scalable control how much, or whether, users can zoom.

viewport-fit=cover lets your layout extend into the safe areas around device notches and rounded corners, which you then manage with CSS env() safe-area-inset values. The right combination depends on your design, and this generator makes each option easy to set correctly.

Accessibility Warning

Disabling zoom with user-scalable=no or a low maximum-scale prevents users from pinch-zooming, which is a serious accessibility problem for people with low vision. The generator warns you when you choose settings that block zoom. Unless you are building something like a map application with its own zoom controls, you should always allow users to zoom.

Why the Viewport Tag Is Essential

Before responsive design, mobile browsers coped with desktop-oriented websites by pretending to be a wide screen — typically around 980 pixels — and then shrinking the rendered page to fit the phone. The result was a tiny, zoomed-out page where text was unreadable until the user pinched and panned around. The viewport meta tag exists to switch off that legacy behaviour and tell the browser to use the device's actual width instead.

With width=device-width and initial-scale=1, the page lays out at the real width of the screen and is displayed at a natural zoom level, which is the foundation every responsive layout builds on. Without the tag, even a perfectly responsive stylesheet is undermined because the browser never adopts the device width in the first place. That is why this single line belongs in the head of essentially every modern web page.

Why Choose Our Meta Viewport Generator?

This generator is completely free, needs no signup, and runs entirely in your browser. It builds the viewport meta tag from clear presets and options, so you get correct behaviour without memorizing the syntax of each property. Importantly, it warns you when your choices would block pinch-zoom — a common accessibility mistake — so you can ship a tag that is both responsive and accessible.

The Meta Viewport Generator is one of more than 200 free tools on ToopTools. If you build responsive sites regularly, you can pin it to your personalized My Workspace workspace so it sits beside your other web-development utilities, always one click away. It works on any modern browser, on desktop and mobile.

Is the meta viewport generator free?

Yes. It is completely free with no limits and no signup. You can build as many viewport meta tags as you like, as often as you like, without ever creating an account.

What is the recommended viewport tag?

For almost all sites, the recommended tag is width=device-width, initial-scale=1, which makes the page match the device width and display at a natural zoom while still allowing users to pinch-zoom. The Responsive preset produces exactly this, and it is the right default unless you have a specific reason to change it.

Should I disable user zoom?

Almost never. Disabling zoom with user-scalable=no prevents people with low vision from enlarging text, which is a serious accessibility failure. The generator warns you when a setting blocks zoom. Only disable it for specialized interfaces, like a map with its own zoom controls, where pinch-zoom would interfere.

What does viewport-fit=cover do?

It lets your layout extend into the full screen on devices with a notch or rounded corners, rather than being letterboxed inside a safe rectangle. You then use CSS env() safe-area-inset values to keep important content clear of the notch. Choose the Notch / safe area preset for edge-to-edge designs.

Where does the tag go?

The viewport meta tag belongs in the head section of your HTML, alongside your other meta tags, and it should be present on every page. Copy the generated tag and paste it into your head before your stylesheets so the browser applies the correct viewport from the start.

Tips for the Viewport Tag

• Use width=device-width with initial-scale=1 as your default
• Keep user zoom enabled for accessibility unless you have a strong reason not to
• Add viewport-fit=cover only when you design for the safe-area insets in CSS
• Include the tag on every page, in the head, before your stylesheets
• Heed the accessibility warning before shipping a zoom-blocking configuration

Key Features

• Presets for responsive, zoom-disabled, and notch/safe-area layouts
• Adjustable initial scale and maximum scale
• Control over whether users can zoom
• viewport-fit option for edge-to-edge layouts on notched devices
• Accessibility warning when settings block pinch-zoom
• Copy ready-to-use HTML and free to use

The Viewport Tag and Responsive Design

The viewport meta tag and CSS media queries are two halves of the same responsive system, and one does not work without the other. Media queries let your stylesheet respond to the width of the viewport — stacking columns on a phone, spreading them out on a desktop — but they can only respond correctly if the viewport actually reports the device's real width. That is the tag's job: width=device-width is what makes the browser report, say, 390 pixels on a phone instead of pretending to be a 980-pixel desktop.

Get the tag wrong and even a beautifully responsive stylesheet falls apart, because the media queries fire against the wrong width. This is why the recommended tag is the foundation every responsive layout assumes is in place. Once it is correct, your CSS breakpoints behave predictably across phones, tablets, and desktops, and options like viewport-fit=cover let you handle the modern details — notches and safe areas — on top of that solid base.

How do I make my website mobile-responsive with a viewport tag?

Choose your options and the tool generates the meta viewport tag instantly. Paste it into the <head> of your HTML so mobile browsers render the page at the correct width and scale — the essential first step for a responsive, mobile-friendly layout.

Does the meta viewport generator work offline?

Yes. The tag is generated entirely in your browser, so once the page has loaded the tool works without an internet connection and nothing you select is uploaded. You can build the viewport tag privately on your own device.