Viewport

The viewport is the visible area of a web page. The viewport can vary with the device and will be smaller on a mobile phone and tablet than on a computer screen.

You can control the viewport, through the <meta> element. Include the following <meta> viewport element in your website to gives the browser instructions on how to control the page's dimensions and scaling:

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

The width=device-width part sets the width of the page to follow the screen-width of the device (that will vary depending on the device).

The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.

Example:

  1. Without the viewport meta tag:
viewport meta tag

2. With the viewport meta tag:

viewport meta tag

Enjoy coding!