HTML Viewport meta tag for Responsive Web Design
The HTML viewport is the visible area of the screen that users see. It changes depending on the device being used. With this approach, we set the width of web pages to match the available screen width, making it 100%. This helps content adapt and look good on any device, ensuring a responsive layout.
Syntax
<meta name="viewport" content= "width=device-width, initial-scale=1.0">
Example: Use of the HTML viewport meta tag for responsive pages.
<!DOCTYPE html>
<html>
<head>
<title>w3wiki</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">w3wiki</div>
<div class="geeks">HTML Introduction</div>
<p>
HTML stands for HyperText Markup Language. It is
used to design web pages using a markup
language. HTML is a combination of Hypertext and
Markup language. Hypertext defines the link
between web pages. A markup language is used to
define the text document within the tag which
defines the structure of web pages. This
language is used to annotate (make notes for the
computer) text so that a machine can understand
it and manipulate text accordingly. Most markup
languages (e.g. HTML) are human-readable. The
language uses tags to define what manipulation
has to be done on the text.
</p>
</body>
</html>
Output
HTML Responsive Web Design
HTML Responsive Web Design is a smart way of designing web pages to look great on any device. It’s all about making HTML elements adjust themselves, like resizing or hiding, based on the device’s screen size. This ensures that no matter if someone’s using a phone, tablet, or computer, the web pages will always look good.
We will show you various examples of how to create an HTML responsive web design that adapts perfectly to different screen sizes.