What is Viewport?
The visible area of a webpage on a given device. The viewport meta tag tells the browser how to size and scale content for the screen.
Also known as: viewport meta tag
The viewport is the part of a webpage currently visible to the user — it changes as you resize a window or rotate a phone. The viewport meta tag (`<meta name="viewport" content="width=device-width, initial-scale=1">`) tells the browser to render the page using the device's actual width and at 1x zoom, instead of trying to render a desktop-width page and shrink it.
Missing or wrong viewport meta tags are one of the most common causes of "my site looks weird on phones." The standard responsive viewport meta tag should be in every page's head and shouldn't disable user scaling (`user-scalable=no`) — that's an accessibility violation that disadvantages low-vision users.
For design purposes, common viewport widths to test: 360px (small Android), 414px (iPhone), 768px (iPad portrait), 1024px (iPad landscape), 1280px (laptop), 1920px (desktop). A responsive design needs to work at all of these.
Without the right viewport meta tag, a site renders as if it's on desktop and gets shrunk to fit the phone — making everything illegibly small. It's a one-line fix with massive impact.
Related