view port

A viewport , in the context of responsive web design, is a virtual area used by the browser to render a web page. The viewport is essential to web development and creation of responsive designs that adapt to various devices and screen sizes.

What is a Viewport?

Viewport is the visible area for a user in the web page. It will vary with the device, and will be smaller on a mobile phone than on a computer screen. On a desktop, the viewport is the window's size, excluding the toolbar and other elements that are not the part of the web page. And on a mobile device, it is the size of the screen.

Types of Viewport
There are mainly two types of viewport, which are as follows:

• Layout Viewport:
  It is the virtual area used by the browser to display the web page. The layout viewport is controlled by adding the meta viewport tag in the HTML head section.

• Visual Viewport:
  It represents the part of the layout viewport that is currently visible on the screen. The visual viewport can be changed on zooming in and out.
  Both the viewports are mutable, which means, the dimensions of both can be altered after loading of the page.

Setting The Viewport

As mentioned above, we can control viewport width using tag. You should include the following viewport element inside head section of all your web pages for ensuring responsiveness.

In the above syntax, "content = width=device-width:" Set the width of the viewport same as the width of the device screen. And, "initial-scale = 1.0:" is used to set the initial zoom level to 100%.

In the below section, we provided example of a web page without the viewport meta tag, and the same web page with the viewport meta tag.

Code With Meta Tag

The code with viewport meta tag, which sets the layout viewport width equal to the device's screen width. As a result, the page is responsive and adapts to different screen sizes.

Code Without Viewport Meta Tag

The code without viewport meta tag, as a result the entire viewport will not be visible in smaller screens. A horizontally scroll option will appear on smaller screen reducing user experience.