The viewport is the area of the browser's window in which the web page is displayed. It is not always the same as the rendered web page. For this reason, browsers provide scrollbar so that you can access the complete page.
In the early days of the internet, web pages were designed only for computer screens with fixed design and size.
Later on, when mobile devices with browsers are introduced, the static pages were too large for mobile screens. To fix this, mobile devices started rendering pages in a virtual window and then shrinking the rendered result down to fit the mobile screen. The user can then zoom to access the different parts of the webpage. This was also done to prevent websites from breaking that are not mobile optimized.
Viewport meta tag
In HTML5, a new meta tag is introduced to control this behavior in a more elegant way.
<meta name="viewport" content="width=device-width, initial-scale=1.0">width: width property controls the size of the viewport. In the above example, it is set to equal the device width.
initial-scale: It controls the zoom level when the webpage is first loaded.
We will look at this property in more detail in a separate article.