What is the Viewport?
The viewport is the visible area of a web page on a device. Mobile browsers render pages wider than the screen by default, causing a zoomed‑out view. The <meta name="viewport"> tag tells the browser how to control the page’s dimensions and scaling.
Basic Syntax
<meta name="viewport" content="width=device-width, initial-scale=1">Common Attributes
- width: Sets the layout width.
device-widthmatches the screen width. - initial-scale: The initial zoom level when the page loads.
- minimum-scale / maximum-scale: Limits how far a user can zoom.
- user-scalable: Enables (
yes) or disables (no) pinch‑zoom.
Live Demo
Resize the browser window to see how the layout adapts. The box below uses the viewport settings to stay responsive.
Resize the window to see me adjust!
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6