The viewport denotes the portion of a web page that is visible to the user. Its dimensions differ depending on the device, being smaller on a mobile phone compared to a computer screen.
It’s recommended to incorporate the following <meta> element into all your web pages:
| <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> |
This provides the browser with directives on managing the page’s dimensions and scaling.
The “width=device-width” segment adjusts the page’s width to match the device’s screen-width, which may vary depending on the device.
The “initial-scale=1.0” segment establishes the initial zoom level when the page is initially loaded by the browser.
Below is an illustration comparing a webpage without the viewport meta tag to the same webpage with the viewport meta tag:
| Note: If you are accessing this page using a smartphone or tablet, you can tap on the two links below to observe the distinction. |