The Viewport & The Responsive web Design

What is the viewport?

The viewport is the area of a browser which shows the content of your website. The viewport can be different for devices of various sizes. If the content of the website does not fit in your browser's viewport, the browser adds scroll bar to make it accessible.

A viewport is neither the size of the windows of your browser nor the screen resolution. For the same window size, a browser with more toolbars displayed will have a smaller viewport.

Devices with a narrow screen, e.g. mobiles, render pages in a virtual viewport which has a width of a desktop screen and then shrink the pages to fit in the mobile screens to show all of the content at once. That allows users to pan and zoom to see different areas of the page.

This mechanism works well for the pages which are not optimized for small screens. But it does not work well for the pages which are optimized for small screens.
To solve this problem, we use the viewport meta tag. A mobile-optimized website should contain a viewport meta tag like:

<meta name="viewport" content="width=device-width, initial-scale=1">

Here width is the width of the viewport, and It can be set to a specific number of pixels or to device-width, which is the width of the screen in CSS pixels at a scale of 100%. The initial scale property controls the zoom level for the first load of the page.

Apart from these two, there are some other properties available which we can use to control the viewport.
E.g.

• height: To control the height of the viewport of the device.
• minimum-scale: To control the minimum zoom level to which a user can zoom the page.
• maximum-scale: To control the maximum zoom level to which a user can zoom the page.
• user-scalable: To control if a user can zoom in or out. (value= yes/no).