The HTML viewport is a crucial meta tag within an HTML document that plays a vital role in creating responsive web pages. It is typically included in the head section of the HTML file along with its specific parameters. By utilizing this tag, we have the ability to define parameters such as width and other design elements to ensure the responsiveness of the webpage.
Describe Viewport
The area of a webpage visible to a user is known as the HTML viewport within a web browser. The dimensions of the viewport adjust based on the device's screen size or the browser window. This responsive design feature allows for optimal display on smartphones and tablets, with a larger viewport available on laptops.
In the absence of a viewport tag, the website may appear unclear or unresponsive when viewed on smaller screens. To address this issue, a responsive tag can be utilized to adjust the viewport for various devices and browsers. Apple Inc. was the first to introduce the viewport meta tag for iOS Safari.
Syntax
Below is the syntax that represents the HTML viewport tag of a webpage.
<head>
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
</head>
Description
- The syntax parameters are the standard viewport configuration found in many web applications. The viewport tag is used for mobile-friendly websites.
- The viewport's size is controlled using the width attribute for the responsive application.
- We can use the specified value like "width=600" regarding CSS pixels. Here, it is setting a unique value like "width= device-width". The width value is the device's width expressed in 100% scale in CSS pixels.
- When a web page loads for the first time, the device's zoom level is controlled by the initial-scale property.
Parameters
The following html viewport requires the parameters.
- Width: The Width of the html viewport for the screen or device.
- Height: The height of the html viewport for the screen or device.
- Initial-scale: The initial scale required for the display or zoom page when the page is loaded for the first time. Minimum-scale: The user can zoom the page at the minimum zoom level.
- Maximum-scale: The user can zoom the page at the maximum zoom level.
- User-scalable: The flag allows the page or device to zoom in or out. The yes or no value is required for the user-scalable parameter.
Examples
Below are illustrations demonstrating the HTML viewport along with its settings.
Example 1:
Illustrated below is a demonstration of the main HTML viewport along with its corresponding value. In this scenario, it is possible to specify solely the desired width of the user.
<!DOCTYPE html>
<html>
<head>
<title> Html viewport </title>
<meta charset = "utf-8" name = "viewport" content = "width=980" />
<style>
.class1 {
font-size:30px;
font-weight: bold;
text-align: center;
color: red;
}
.class2 {
font-size:22px;
text-align:center;
font-weight:bold;
}
b {
text-align:justify;
color:blue;
}
</style>
</head>
<body>
<div class = "class1">
Html Viewport with only width
</div>
<div class = "class2">
A Example website helps to learn computer science technologies
</div>
<b>
The HTML viewport is the Meta tag in the HTML page for the responsive web page.
The HTML viewport contains the head section with the tag and its parameters.
We can set the width and other designs as per the responsive page.
</b>
</body>
</html>
Output:
The output displays the webpage based on the viewport size and the type of responsive device being used.
Example 2:
The illustration below demonstrates the main HTML viewport along with its content. In this scenario, the viewport can be utilized by specifying standard parameters such as width and initial scale.
<!DOCTYPE html>
<html>
<head>
<title> Html viewport </title>
<meta charset = "utf-8" name = "viewport" content = "width=device-width, initial-scale=1.0" />
<style>
.class1 {
font-size:30px;
font-weight:bold;
text-align:center;
color:red;
}
.class2 {
font-size:22px;
text-align:center;
font-weight:bold;
}
p {
text-align:justify;
color:blue;
}
</style>
</head>
<body>
<div class = "class1">
Html Viewport
</div>
<div class = "class2">
A Example website helps to learn computer science technologies
</div>
<p>
The section of a web page where a visitor can see the content is called the HTML viewport in a browser.
The size of the viewport changes according to the screens of the devices or browsers.
The viewport creates a responsive function for a smartphone or tablet, and a laptop's viewport is larger.
</p>
<p>
The HTML viewport is the Meta tag in the HTML page for the responsive web page.
The HTML viewport contains the head section with the tag and its parameters.
We can set the width and other designs as per the responsive page.
</p>
</body>
</html>
Output:
The output displays the webpage based on the viewport dimensions and the device's responsiveness.
Example 3:
Displayed below is a sample showcasing the main HTML viewport along with the designated values.
<!DOCTYPE html>
<html>
<head>
<title> Html viewport </title>
<meta charset = "utf-8" name = "viewport" content = "width=250, initial-scale=1.0" />
<style>
.class1 {
font-size:30px;
font-weight:bold;
text-align:center;
color:red;
}
.class2 {
font-size:22px;
text-align:center;
font-weight:bold;
}
p {
text-align:justify;
color:blue;
}
</style>
</head>
<body>
<div class = "class1">
Html Viewport with specified width
</div>
<div class = "class2">
A Example website helps to learn computer science technologies
</div>
<p>
The HTML viewport is the Meta tag in the HTML page for the responsive web page.
The HTML viewport contains the head section with the tag and its parameters.
We can set the width and other designs as per the responsive page.
</p>
</body>
</html>
Output:
The displayed content adjusts according to the viewport and the device's responsiveness.
Example 4:
The illustration below demonstrates the main HTML viewport along with its corresponding value. In this scenario, the user-scalable values can be defined using the viewport tag.
<!DOCTYPE html>
<html>
<head>
<title> Html viewport </title>
<meta charset = "utf-8" name = "viewport" content = "width=980, initial-scale=1.0" />
<style>
.class1 {
font-size:30px;
font-weight:bold;
text-align:center;
color:red;
}
.class2 {
font-size:22px;
text-align:center;
font-weight:bold;
}
p {
text-align:justify;
color:blue;
}
</style>
</head>
<body>
<div class = "class1">
Html Viewport with the user-scalable
</div>
<div class = "class2">
A Example website helps to learn computer science technologies
</div>
<p>
The section of a web page where a visitor can see the content is called the HTML viewport in a browser.
The size of the viewport changes according to the screens of the devices or browsers.
The viewport creates a responsive function for a smartphone or tablet, and a laptop's viewport is larger.
</p>
</body>
</html>
Output:
The output displays the webpage according to the viewport and the responsive device being used.
Conclusion
The viewport plays a crucial role in web applications, adjusting based on the device and screen dimensions to ensure proper display of the webpage. It adapts to the device width and determines the initial layout of the web page.