First, we need to understand one simple thing: the visible area of the screen, which is called viewport. Of course, it varies from device to device, and obviously, working with measures directly related and strictly linked to it seems like a good idea.

Its first widespread notion and implementation came with the introduction of HTML5 standard, which added a <meta> tag specifically for it.

Metadata is information about the data on the page. It is usually related to language, SEO aspects, and description of the content among other things. While not clearly visible on the page, this data is read and used by machines—they always are inside the head element.

The metadata viewport is expressed by the name (="viewport"), the width property, and the initial-scale of one.

Of course, those properties can be set to whatever amount you want them to be; you can set the width to be a fixed one and the page to be zoomed in or out (initial-scale), but the well known, worldwide approach...