
- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
HTML Viewport meta tag for Responsive Web Design
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
Attribute | Explanation |
---|---|
width | It specifies the virtual viewport width of the device. |
height | It specifies the virtual viewport height of the device. |
initial-scale | It specifies the zoom level when the page is first visited. |
minimum-scale | It specifies the minimum zoom level to which the user can zoom the page. |
maximum-scale | It specifies the maximum zoom level to which the user can zoom the page. |
user-scalable | It specifies whether the user can zoom in or out. |
Example
Let us see an example of HTML viewport meta tag −
<!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.
- Related Questions & Answers
- CSS3 Responsive Web Design
- Usage of Responsive Web Design
- Responsive web design best for mobile seo strategy
- HTML <Meta> Tag
- Responsive Web Design with Media Queries in CSS
- How to use Meta Tag to redirect an HTML page?
- Phonegap + Windows Phone 8 : HTML5 viewport meta & scaling issue
- HTML DOM Meta Object
- HTML5 meta name = “viewport” doesn't work as expected
- How to replace default meta tag from “layout” with customizing meta tags in “view” with HTML?
- How to design a responsive website?
- How to create a responsive contact section for web pages?
- Latest CSS Properties and APIs for Web Design in 2020
- HTML <meta> charset Attribute
- HTML <meta> content Attribute
Advertisements