HTML Meta Viewport

The Viewport is nothing but the visible area of a web page, which varies with devices of different sizes.

HTML Meta tag for viewport helps us provide instructions to browsers on how they handle the page width w.r.t. device size while loading a page.

Below is the commonly used viewport instruction, which instructs browsers to

  • set page width to device-width
  • set initial zooming to be 1.0, which is normal
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Example

<!doctype html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <h1>HTML Viewpoint</h1>
</body>
</html>

Overall

Understood the importance of viewpoint definition in meta tags.