Categories
Web development

Viewport

Viewport

The viewport is the visible area of a web page. The viewport can vary with the device and will be smaller on a mobile phone and tablet than on a computer screen.

You can control the viewport, through the <meta> element. Include the following <meta> viewport element in your website to give the browser instructions on how to control the page’s dimensions and scaling:


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

The width=device-width part sets the width of the page to follow the screen-width of the device (that will vary depending on the device).

The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.

Example:

  1. Without the viewport meta tag:
viewport meta tag

2. With the viewport meta tag:

viewport meta tag

Enjoy coding!

Read also:

CSS Responsive Web Design – Introduction

How to create a responsive zig zag layout?

How to create a responsive two-column layout?