HTML5 Viewport

What is the viewport?

In web development, the viewport is the visible area of a web page on a device’s screen (browser window on desktop, screen on mobile).
Modern devices have different screen sizes and pixel densities.
Without configuring the viewport, mobile browsers used to render web pages at a desktop width (~980px) and then shrink it down, forcing users to pinch-zoom and scroll horizontally.

The viewport meta tag tells the browser how to control the page’s dimensions and scaling.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

width=device-width: sets the width of the page to follow the screen width of the device (so it’s responsive).
initial-scale=1.0: sets the initial zoom level when the page is first loaded by the browser.

Setting	What it does
`width=device-width`	Sets viewport width to device’s screen width.
`initial-scale=1.0`	Sets initial zoom level to 100%.
`minimum-scale=1.0`	Sets minimum zoom level.
`maximum-scale=1.0`	Sets maximum zoom level.
`user-scalable=no`	Disables user zooming (not recommended for accessibility).