HTML | Viewport meta tag for Responsive Web Design

24 Dec, 2021
What is Viewport?A Browser’s viewport is the area of 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. For a laptop, the viewport has a larger size as compared to a smartphone or tablet.
Example:The laptop screen is wider
On smartphones the page is adjusted due to narrower screen
Note: When a page is not made responsive for smaller viewports it looks bad or even breaks on smaller screen. To fix this problem introduce a responsive tag to control the viewport. This tag was firstly introduced by Apple Inc. for Safari iOS.
Syntax:
<meta name="viewport" content= "width=device-width, initial-scale=1.0">
This is the common setting of viewport used in various mobile-optimized websites. The width property governs the size of the viewport. It is possible to set it to a specific value (“width=600”) in terms of CSS pixels. Here it is set to a special value(“width= device-width”) which is the width of the device in terms of CSS pixels at a scale of 100%. The initial-scale property governs the zoom level when the page is loaded for the first time.
Note: The meta tag should be added in the head tag in HTML document.
A Responsive tags has the following attributes:
width: Width of the virtual viewport of the device.
height: Height of the virtual viewport of the device.
initial-scale: Zoom level when the page is first visited.
minimum-scale: Minimum zoom level to which a user can zoom the page.
maximum-scale: Maximum zoom level to which a user can zoom the page.
user-scalable: Flag which allows the device to zoom in or out.(value= yes/no).
Example:
<!DOCTYPE html><html>    <head>        <title>GeeksforGeeks</title>        <meta charset="utf-8" name="viewport"         content= "width=device-width, initial-scale=1.0">        <style>            .gfg {                font-size:40px;                font-weight:bold;                color:green;                text-align:center;            }            .geeks {                font-size:17px;                text-align:center;            }            p {                text-align:justify;            }        </style>    </head>    <body>        <div class = "gfg">GeeksforGeeks</div>        <div class = "geeks">A computer science portal for geeks</div>                            <p>Prepare for the Recruitment drive of product based companies like        Microsoft, Amazon, Adobe etc with a free online placement preparation        course. The course focuses on various MCQ's & Coding question likely        to be asked in the interviews & make your upcoming placement season         efficient and successful. </p>        <p>An extensive Online Test Series for GATE 2019 to boost the         preparation for GATE 2019 aspirants. Test series is designed         considering the pattern of previous years GATE papers and ensures        to resemble with the standard of GATE. This Test Series will help        the aspirants track and improve the preparation through questions        of various difficulty levels. There will be two Test Series         covering the whole syllabus of GATE, including Mathematics and        Aptitude. Test Series I will cover the basic and medium difficulty,         whereas in Test Series II difficulty will be slightly higher. </p>    </body></html>                    
Output:Wide Display output:Narrow Display output:
vshylaja
CSS
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to update Node.js and NPM to next version ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to create footer to stay at the bottom of a Web page?
CSS to put icon inside an input element in a form
How to update Node.js and NPM to next version ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
REST API (Introduction)
Hide or show elements in HTML using display property