Generate viewport, mobile, and theme meta tags
The viewport meta tag tells a mobile browser how to size the page before any of your CSS runs. Leave it out and phones assume they are rendering a desktop site built for roughly 980 pixels, then shrink the whole thing to fit, which is why an unstyled-looking page appears zoomed out with unreadably small text. One line fixes it, and this generator produces that line with the options explained.
The essential declaration is width=device-width, initial-scale=1. The first part tells the browser to make the layout viewport match the device's own width in CSS pixels, so your media queries respond to the real device. The second sets the starting zoom to 100 percent, which also prevents a long-standing quirk where some devices would change zoom on rotation.
Other properties exist. maximum-scale and minimum-scale bound how far a user may zoom, and user-scalable can disable pinch zoom entirely. There is also viewport-fit=cover, which lets a page extend into the rounded corners and notch area on modern phones, used together with the safe-area inset environment variables so your content does not end up underneath the hardware.
Setting user-scalable=no, or clamping maximum-scale to 1, stops people from pinching to zoom. For anyone with low vision, that removes the single most useful accessibility feature on a phone, and it maps directly to a WCAG failure. It is usually added to stop iOS zooming when a form field is focused, but the real cause of that behaviour is an input with a font size below 16 pixels. Fix the font size and you do not need to disable zoom. Modern iOS ignores the restriction anyway, so the tag mostly just harms users on other platforms.
For almost every site the correct tag is the plain width=device-width, initial-scale=1. Add viewport-fit=cover only when you are deliberately drawing to the edges of a notched screen and are handling the safe-area insets in CSS. Everything else is a special case you should be able to justify.
Do I need this on every page? Yes, it is per-document, so it belongs in your base template.
Should I ever disable user scaling? Effectively no. It is an accessibility failure with a better fix available.
Does it replace responsive CSS? No. It makes your media queries measure the right thing; the layout work is still yours.
Without a viewport meta tag, mobile browsers assume your page was designed for a desktop and render it at around 980 pixels wide, then shrink the whole thing to fit the screen. The result is tiny, zoomed-out text. The viewport tag tells the browser to use the device width instead, which is the foundation every responsive layout is built on.
The usual value is width=device-width, initial-scale=1. That maps the layout width to the device width and sets the initial zoom to 100 percent. The generator above lets you adjust these plus optional settings such as maximum scale and whether the user can zoom. Be cautious with disabling user scaling, because blocking zoom removes an accessibility feature that people with low vision rely on.
The theme-color tag tints the browser interface on supported devices, and the related web-app tags control how a page behaves when saved to a home screen. These are optional polish rather than requirements, but they make an installed site feel more native. The tool outputs only the tags you enable, so you can keep the head lean.
Source: MDN Web Docs: Viewport meta tag