Zoran Pandovski
By Zoran Pandovski

HTML Meta tag viewport

HTML Meta tag viewport

The meta name=viewport is not part of any web standards, but most of the mobile browsers today have support for it. The meta tag adds instructions to the browser about the page scaling on different devices. To optimize the webpage for mobile devices add:

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

Note: meta tag should be added in the <head> of HTML page.

The content width=device-width will set the width of the page the same as the device screen size and initial-scale=1.0 will set the initial zoom on load. This means it will scale on different devices since the viewport(the visible area to the user) is different on the laptops, mobile phones, tablets. Omitting the viewport the browser will use a virtual viewport that will zoom out the website. So, it is always the best practice to add a viewport so the website will be optimized for different screens.