CSS RWD Viewport

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.

Viewport can also be specified as the user's visible area of the web page, which is determined by the device's screen size and its resolution. 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.

CSS RWD Viewport - Types

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.

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

    In the above syntax, the content="width=device-width signifies that the width of the viewport should be set to the width of the device screen, and initial-scale=1.0 is used to set the initial zoom level.

  • 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.

CSS RWD Viewport - Setting

As mentioned above in the layout viewport, <meta> tag can be used to set the viewport. The use of <meta> tag on every page. gives the browser instructions to control the page's dimensions and scaling.

Refer the example given below to understand how the viewport can be set and based on the size of the viewport, the content gets altered. Change the viewport size to see the effect.

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
   #card-container {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      width: 500px;
   }
   
   @media screen and (max-width: 550px){
      #card-container {
      flex-direction: column
      }
   }

   .card {
      width: 100px;
      height: 80px;
      border: 1px solid black;
      border-radius: 10px;
      background-color: aquamarine;
      text-align: center;
      font-size: 4em;
   }
</style>
</head>
<body>
   <div id="card-container">
   <div class="card">
      <span class="card-number">1</span>
   </div>
   <div class="card">
      <span class="card-number">2</span>
   </div>
   <div class="card">
      <span class="card-number">3</span>
   </div>
   </div>
</body>
</html>

In the above example, a media query is added to set the direction of the flex as column, when the screen size reduces upto 550px, else the flex direction is in row.

Advertisements