Viewport, what does it solve and it's configurations

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

HTML5 introduced a new way to control the viewport, using the meta tag like so:

What is this code achieving? What are the properties of this meta tag and how is it helping with smaller devices?

  • The width enables 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.
  • The initial-view property controls the webpage's default zoom level on initial load. You can also control the maximum and minimum zoom level using the maximum-view and minimum-view properties.