Micro Tools
Advertisement

Viewport Meta Gen

Generate the viewport meta tag free. Toggle width, initial scale, maximum scale and user scaling to build the exact tag your responsive site needs.

Viewport options

Accessibility tip: never disable zoom unless you have a very specific reason. Users with low vision rely on pinch-to-zoom.

Your meta tag

Paste inside the <head> of your HTML.
Advertisement

How it works

Choose the viewport width (device-width is the standard), set the initial scale, optionally cap the maximum scale, and decide whether users may zoom. The tag builds live as you change options, ready to copy into your page's head. Most responsive sites need nothing more than width=device-width, initial-scale=1.

Why it matters

Without a viewport meta tag, mobile browsers render pages at desktop width and shrink them, producing tiny unreadable text. The tag tells the browser to use the device's real width, which is the foundation every responsive layout is built on.

Related tools

JSON formatterFormat and validate JSON, privately. Regex testerTest regex live with highlighting. Base64 encoderBase64 encode and decode, plus URL encoder and JWT decoder.

Viewport Meta Gen FAQs

What is the standard viewport tag?
<meta name="viewport" content="width=device-width, initial-scale=1">. It works for virtually every responsive site.
Should I disable user scaling?
Almost never. Disabling zoom harms accessibility for users with low vision and can hurt your mobile usability scores.
What does initial-scale=1 do?
It sets the default zoom level to 100%, so one CSS pixel maps naturally to the device's layout width on load.
When would I use a custom width?
Rarely: for fixed-width layouts or web apps designed for a specific width. Responsive sites should stick with device-width.
Where do I paste the tag?
Inside the <head> section of your HTML, near the top, before your stylesheets.
Advertisement