A viewport meta tag defines how a web page is rendered and displayed on mobile devices. It improves the presentation of the page’s content on the mobile browser and makes for a richer interaction and user experience.
If you are designing a website, it is important to take into account that your users will not be accessing your site using only desktop browsers. The days of designing websites exclusively for desktops are long gone as more people now access their favorite sites from smartphones.
If the viewport is not defined, the mobile device will display the web page as it has been designed for the desktop, while fitting to the screen of the mobile, without any scaling of the page’s dimensions.
A viewport meta tag thus gives control over the dimensions of a page and how it will scale and fit on various mobile devices.