Choose the right width, scale limits and user-scaling behavior, then copy a correct viewport meta tag for your responsive page.
The viewport meta tag tells mobile browsers how to scale your page. Getting it wrong is one of the most common causes of a site looking zoomed out or broken on phones.
Matches the viewport to the device's actual width in CSS pixels, the foundation of responsive design.
Sets the starting zoom level when the page loads, almost always left at 1.
Minimum and maximum scale bound how far users can pinch-zoom in either direction.
Controls whether content can extend into the safe areas around notches on modern devices.
Without it, mobile browsers render pages at a default desktop-like width and zoom out, which breaks responsive CSS layouts designed around the device's real width.
Generally no. Preventing zoom hurts accessibility for users who need to enlarge text, so leave user-scalable=yes unless you have a specific, well-justified reason not to.
It lets your page content extend into the safe areas around notches and rounded corners on devices like modern iPhones, which you then handle with CSS environment variables.
width=device-width, initial-scale=1 is the standard baseline used by the vast majority of responsive websites.
It belongs inside the head section of your HTML document, ideally near the top alongside your charset declaration.
More handy tools from My Panda Toolbox.