A viewport is the visible area on a screen. It varies from device to device. It is smaller on a mobile than it is on a desktop. Before the advent of mobiles and tablets, websites used to have fixed and static design. This became very inconvenient as the mobile market boomed. Initially, mobile browsers scaled down the webpage to display the page, but that's not an optimal user experience. Is that an optimal experience? Considering most of the customers of a webpage are from mobile? Definitely Not. The web saw a major shift in how it's developed and it's often a common practice among developers to do mobile first development.
HTML5 viewport fix
metatag like so:
What is this code achieving? What are the properties of this meta tag and how is it helping with smaller devices?
widthenables the developer to control the width of the viewport. It can be set to a specific value like 400px or you can choose to set to
device-width(recommended) which sets the width of the viewport to be the device width.
initial-viewproperty controls the webpage's default zoom level on initial load. You can also control the maximum and minimum zoom level using the