HTML5 Viewport
<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). |