Open In App

HTML Viewport meta tag for Responsive Web Design

Improve
Improve
Like Article
Like
Save
Share
Report

A Browser’s viewport is the area of the 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.

Note: When a page is not made responsive for smaller viewports it looks bad or even breaks on a smaller screen. To fix this problem introduce a responsive tag to control the viewport. This tag was first introduced by Apple Inc. for Safari iOS.

Syntax

<meta name="viewport" content= "width=device-width, initial-scale=1.0"> 
  • The ‘ width=device-width ' in meta tag sets the width of the page to follow the screen width of the device, which will vary depending on the device.
  • The ‘ initial-scale=1.0 ‘ in meta tag sets the initial zoom level when the page is first loaded by the browser.

Attributes

A Responsive tag has the following attributes:

Attribute Values

Description

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: The laptop screen is wider without the viewport meta tag.

Example: The screen is responsive with the viewport meta tag .On smartphones the page is adjusted due to narrower screen

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.

Example: In this example we will see the implementation of metag tag with an example by making it responsive.

html




<!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 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:

viewPortMeta.gif

HTML viewport meta tag Example output



Last Updated : 06 Mar, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads