Teach with us

HTML Viewport meta tag for Responsive Web Design

HTMLWeb DevelopmentFront End Technology

The HTML Viewport meta tag is used for creating responsive website. So that web page can adjust its width according to viewport.

Syntax

Following is the syntax −

< meta name=”viewport” content=”width=device-width, initial-scale=1.0” >

Attributes of viewport meta tag

AttributeExplanation
widthIt specifies the virtual viewport width of the device.
heightIt specifies the virtual viewport height of the device.
initial-scaleIt specifies the zoom level when the page is first visited.
minimum-scaleIt specifies the minimum zoom level to which the user can zoom the page.
maximum-scaleIt specifies the maximum zoom level to which the user can zoom the page.
user-scalableIt specifies whether the user can zoom in or out.

Example

Let us see an example of HTML viewport meta tag −

Live Demo

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
   body {
      color: #000;
      height: 100vh;
      background-color: #FBAB7E;
      background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);
      text-align: center;
      padding: 20px;
   }
</style>
</head>
<body>
<h1>HTML Viewport meta tag Demo</h1>
<p>
This is a paragraph with some dummy text.
This is a paragraph with some dummy text.
This is a paragraph with some dummy text.
This is a paragraph with some dummy text.
</p>
<p>
This is another paragraph with some dummy text.
This is another paragraph with some dummy text.
This is another paragraph with some dummy text.
This is another paragraph with some dummy text.
This is another paragraph with some dummy text.
This is another paragraph with some dummy text.
</p>
</body>
</html>

Output

Now try to resize browser window to observe how the page display on smaller device.

raja
AmitDiwan
Updated on 16-Feb-2021 04:45:27

Previous Page Print Page Next Page  
Advertisements