In this tutorial, you will learn how to set the viewport meta tag in HTML.
When you build a web site for mobile projects, you can use a special meta element that lets you set a device's viewport.
To start, you should understand that the viewport meta tag on mobile phones works oppositely from the viewport on a computer screen. The viewport on a computer screen is the prominent area of a web page. However, the user can adjust the size of the viewport by changing the size of the browser window.
In reverse, the viewport on a mobile device can be bigger or shorter than the visible area and decides how the page contents appear in that area.
To set the viewport, you use a meta element with the name property set to "viewport". Then, for the content attribute, you can define any of the features listed below.
Viewport Metadata Properties
| Property | Description |
|---|---|
| width | The width of the viewport in pixels. You can also use the device-width keyword to show that the viewport should be as broad as the screen. |
| height | The height of the viewport defined in pixels. You can also use the device-height keyword to show that the viewport should be as big as the screen. |
| initial-scale | A number that shows the initial zoom factor that's used to represent the page. |
| minimum-scale | A number that shows the minimum zoom factor for the page. |
| maximum-scale | A number that shows the maximum zoom factor for the page. |
| user-scalable | Shows whether the user can zoom in and out of the viewport. Probable values are yes and no. |
The two viewport meta tag examples are given below to illustrate how this meta element works.
Viewport Meta Tag Examples
The first example below sets the width of the viewport to the width of the mobile phone device. If a page is broader than the device width but smaller than the default viewport width, use this setting. Then the page will be expanded, so it fills the visible area. Because this example also sets the user-scalable property to "no", the user can't zoom in or out of the page.
<meta name="viewport" content="width=device-width, user-scalable=no">
In the second example below sets the width of the mobile phone device, but it also configures the zoom factor, or scale, for the viewport. In this case, the initial-scale is set to 1, which represents the default with for the viewport.
<meta name="viewport" content="width=device-width, initial-scale=1">
