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

Understand the Viewport

The viewport of a Browser is the area on a web page where the content is visible to the user. The size of the viewport varies depending on the screen resolutions of the devices that are displaying the website. The viewport on a laptop is larger than that of a tablet or smartphone.

Apple Inc. introduced this tag for Safari iOS. __S.5__

Meta viewport usage:

A typical site optimized for mobile viewing has a meta viewport that looks something like this:

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

The width property controls viewport size. You can set it to a specified number of pixels, such as width=600. This sets the web page’s width to 600 pixels. Or you can set it to device-width a special value, which is the width in CSS pixels at a scale from 100%.

The zoom level at which the page is loaded for the first time when it’s initialized is controlled by the initial-scale property. If its value is 2, it will set the default zoom level to 200%.

You can add more additional properties belongs to this meta, depending on your usage. Below is a list of available properties:

Property	Description
width	Width of the virtual viewport of the device
height	Height of the virtual viewport of the device.
initial-scale	Zoom level when the page is first visited.
minimum-scale	Minimum zoom level to which a user can zoom the page
maximum-scale	Maximum zoom level to which a user can zoom the page.
user-scalable	Allows the device to zoom in or out.(value= yes/no).