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.