Role of ViewPort in Visual Formatting Model

Last Updated : 01 Aug, 2022

In this article, we will see the role of the Viewport in the Visual Formatting Model, along with knowing its purpose & basic implementation. A Browser’s viewport is the area of a web page in which the content is visible to the user. The viewport does not have the same size, it varies with the variation in screen size of the devices on which the website is visible.

The viewport size varies according to your screen orientation, especially in continuous media. So it depends on the screen size of the device. While loading a page, the browser checks for the viewport size, and the visual formatting model arranges every element according to it. If the viewport size changes, the elements will arrange accordingly. In continuous media, the viewport is the area in which you view the browser window. The browser can change the page’s layout if the page’s viewport size is changed. The viewport can be defined with the following syntax in the HTML file:

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

Please refer to the HTML Viewport meta tag for Responsive Web Design article for a detailed description.

For example, If you resize the window in which you are working then the visual formatting model will change the arrangement of the elements of the page according to that viewport size, or imagine you change the orientation of the mobile device then also the layout will change. If the viewport is smaller than the size of the document then the browser will enable a scrollbar so that people can consume the rest of the content by scrolling down.

Example: Below example illustrates the page in complete desktop screen orientation where no scroll bar is needed so the visual formatting model does not insert it. When the page changes the orientation or reduces the screen size, then the image is resized according to the device-width size & accordingly, the scrollbar gets added, to render the content of the webpage.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <link href= 
"https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap"
          rel="stylesheet" /> 
    <style> 
        body { 
            font-family: 'Open Sans', sans-serif; 
            margin: 0; 
            background-color: rgb(0, 0, 0); 
        } 
  
        a { 
            text-decoration: none; 
        } 
  
        #main-header { 
            height: 5rem; 
            display: flex; 
            justify-content: space-between; 
            align-items: center; 
            background-color: rgb(255, 254, 253); 
            padding: 0 5%; 
        } 
  
        #logo { 
            font-size: 1.5rem; 
            font-weight: bold; 
            color: rgb(40, 149, 23); 
            text-transform: uppercase; 
        } 
  
        main h1 { 
            text-align: center; 
            color: rgb(40, 149, 23); 
            font-size: 3rem; 
        } 
  
        #latest-products { 
            width: 80%; 
            margin: 2rem auto; 
        } 
  
        #latest-products ul { 
            list-style: none; 
            margin: 0; 
            padding: 0; 
            display: grid; 
            grid-template-columns: 1fr 1fr; 
            gap: 1rem; 
        } 
  
        .item { 
            background-color: rgb(228, 206, 182); 
            border-radius: 6px; 
            overflow: hidden; 
        } 
  
        .item img { 
            height: 22rem; 
            width: 100%; 
            object-fit: cover; 
        } 
  
        .item-content { 
            padding: 1rem; 
            text-align: center; 
        } 
  
        .item h2 { 
            margin: 0 0 1rem 0; 
        } 
  
        @media (max-width: 48rem) { 
            #latest-products ul { 
                grid-template-columns: 100%; 
            } 
  
            main h1 { 
                font-size: 1.5rem; 
            } 
        } 
    </style> 
</head> 
  
<body> 
    <header id="main-header"> 
        <a href="index.html" id="logo"> 
            GeeksforGeeks  
        </a> 
    </header> 
  
    <main> 
        <h1>GeeksforGeeks Article</h1> 
        <section id="latest-products"> 
            <ul> 
                <li class="item"> 
                    <article> 
                        <img
                            src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20220711133304/geeksforgeeks.jpg" /> 
                        <div class="item-content"> 
                            <h2>GeeksforGeeks</h2> 
                        </div> 
                    </article> 
                </li> 
                <li class="item"> 
                    <article> 
                        <img
                            src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20220711133304/geeksforgeeks.jpg" /> 
                        <div class="item-content"> 
                            <h2>GeeksforGeeks</h2> 
                        </div> 
                    </article> 
                </li> 
            </ul> 
        </section> 
    </main> 
</body> 
</html>

Output: In the below image, you can see the scroll bar is enabled by the browser according to the visual formatting model as the document size is greater than the viewport.