Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Role of ViewPort in Visual Formatting Model
It is crucial to know about viewport in the visual formatting model for any web developer to develop a responsive website. The viewport is an area that is visible in the browser window or mobile device screen.
In this tutorial, we will learn about the role of viewport in visual formatting models with examples.
What is a Visual Formatting Model?
The visual formatting model allows web browsers to decide how to show the HTML content on the web page. It provides the visualization for the content.
The visual formatting model shows the content on the web page according to the viewport area, some other factors, and CSS properties such as margin, padding, border, etc.
Role of Viewport
The main role of the viewport in the visual formatting model is to decide the visible area. As the visible area changes when the device's screen dimension changes, the viewport of the content also changes.
In the early stage, web pages are made only for computers. So, websites were not responsive, but nowadays, websites are getting 60% of traffic from mobile and tablet devices. So, it is required to show the web page content according to the viewport area.
In simple terms, we can say that a viewport is used to decide the visible area and make responsive web design according to the visible area.
Syntax
Users can follow the syntax below to add the viewport to the website.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
We can add the viewport to the website using the <meta> tag.
Attributes
Name − It takes the ‘viewport’ value to represent the tag as the viewport.
Content − It sets the web page's width, and the ‘device-width’ value sets the width equal to the screen width.
Initial-scale − It zooms in or out of the web page according to the scale value.
Now, let’s understand the role of the viewport in the visual formatting model via examples.
Example 1
In the example below, we created multiple div elements with different class names inside the parent div element. Also, we added the viewport using the meta tag.
In CSS, we set the width for the parent div and set the display. Users can change the size of the browser window and observe how it arranges the content according to the viewport of the browser.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.parent {
width: 90%;
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
}
.first,
.second,
.third,
.fourth {
width: 230px;
height: 100px;
margin: 20px;
background-color: aqua;
border: 2px solid blue;
border-radius: 12px;
}
</style>
</head>
<body>
<h2>Using the <i> viewport meta tag </i> to make responsive website</h2>
<div class = "parent">
<div class = "first"> </div>
<div class = "second"> </div>
<div class = "third"> </div>
<div class = "fourth"> </div>
</div>
</body>
</html>
Example 2
In the example below, we have a container div element containing the image and text div element. We added the CSS so that the image takes 50% space and the ttakestake 40%.
Also, we used the media query to design the web page for mobile devices. Users can observe the output on mobile and desktop devices. Also, observe the output after removing the viewport from the below code.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.container {
width: 90%;
margin: 0 auto;
border: 1px solid black;
padding: 10px;
display: flex;
}
.image {width: 50%; margin-right: 3%;}
.text {
width: 40%;
font-size: 1.5rem;
padding: 20px;
margin-left: 3%;
}
img {width: 100%; height: 300px;}
/* media query for mobile devices */
@media (max-width: 600px) {
.container {flex-direction: column;}
.image {width: 100%; margin-right: 0; margin-bottom: 20px;}
.text {width: 90%; margin-left: 0;}
}
</style>
</head>
<body>
<h2>Using the <i> viewport meta tag </i> to make responsive website</h2>
<div class = "container">
<div class = "image">
<img src = "https://picsum.photos/seed/picsum/200/300" alt = "Random image">
</div>
<div class = "text">
The image is picked up from the picsum website. It allows us to get random image of specified dimensions. Change the viewport size of your browser to checkout the responsive design.
</div>
</div>
</body>
</html>
Conclusion
We learned the use of a viewport while developing the web page. It is used to get the size of the visible area according to the screen width and visualize the content.
If we use the media queries to make the website responsive without using the viewport meta tag, the webpage remains as it is rather than becoming responsive.
80 Views
