The viewport is the content area on the web page that is visible to the user or the page visitor. The viewport does not have a fixed size, it varies with the screen size as the size decreases or increases the viewport.
In earlier times when phones and tablets were not used to access the web pages, the static and fixed-size designs were common to use, but when phones and tablets were introduced to the internet, the fixed-size pages were very large for those screen sizes. Then, to resolve it HTML viewport was introduced.
Syntax:
<head>
<meta name="viewport"
content= "width=device-width,
initial-scale=1.0">
</head>This is the common implementation of the viewport that is used for various device varying web pages.
- width = device-width: The width property set with a special value that varies for different screen width devices to a scale of 100%. It is also possible to assign it with a fixed value in ‘px’ unit (i.e. width = 350px).
- initial-scale = 1.0: The initial-scale property defines the initial zoom of the webpage at the time when it is first loaded on the browser.
HTML <Meta> Tag properties:
- initial-scale: This property is used to define the width of viewport of the device used to visit the web page.
- user-scalable: This property allows the device to zoom in or out, values will be “yes” or “no”.
- width: This property is used to define the width of viewport of the device used to visit the web page.
- height: This property is used to define the height of viewport of the device used to visit the web page.
- minimum-scale: This property is used to define the minimum zoom level to which a user can zoom the page.
- maximum-scale: This property is used to define defines the maximum zoom level to which a user can zoom the page.
Example 1: The below example illustrates how the content will look on the web page if we do not use <meta> tag with viewport value. The bottom text is not shown fully as the <meta> tag is not used.
<!DOCTYPE html> <html lang="en">
<head>
<title>Use of viewport value in meta tag</title>
</head>
<body>
<div class="image">
<img src=
alt="GeeksforGeeks">
</div>
<h2>Welcome to GFG!</h2>
<h4>A computer science portal for all geeks.</h4>
<h3>Our Achievements: </h3>
<p>
Billions of Users, Millions of Articles
Published, Thousands Got Hired by Top
Companies and the numbers are still
growing.
</p>
</body>
</html>
|
Output:
Example 2: The following code demonstrates the viewport output using the <meta> tag. The output is shown with respect to the iPhone viewport.
<!DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>Use of viewport value in meta tag</title>
</head>
<body>
<div class="image">
<img src=
alt="GeeksforGeeks">
</div>
<h2>Welcome to GFG!</h2>
<h4>A computer science portal for all geeks.</h4>
<h3>Our Achievements: </h3>
<p>
Billions of Users, Millions of Articles
Published, Thousands Got Hired by Top
Companies and the numbers are still
growing.
</p>
</body>
</html>
|
Output: