|
|
This gives the browser instructions on how to control the page's dimensions and scaling. The The
|
Full Example of HTML Viewport in Head
Here is an example of a web page without the viewport meta tag, and the same web page with the viewport meta tag:
index.html
Example:
HTML
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="John Doe">
</head>
<body>
<p>All meta information goes inside the head section.</p>
</body>
</html>
Tip: If you are browsing this page with a phone or a tablet, you can click on the two links below to see the difference.
Example with Viewport
Here given with Viewport
index.html
Example:
HTML
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style>
img {
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<p><b>To understand this example, you should open this page on a phone or a tablet.</b></p>
<img src="https://itupto.com/uploads/images/2023-09-18-06-52-50-1_kx-imo7oddybajkxhlvarg.png" alt="Chania" width="460" height="345">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
</p>
</body>
</html>
Output should be:
Example without Viewport
Here given without Viewport
index.html
Example:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
img {
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<p><b>To understand this example, you should open this page on a phone or a tablet.</b></p>
<img src="https://itupto.com/uploads/images/2023-09-18-06-52-50-1_kx-imo7oddybajkxhlvarg.png" alt="Chania" width="460" height="345">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
</p>
</body>
</html>
Output should be:
| What is HTML - The Head Element | HTML - The Head Element |
| How to create The HTML <head> Element | HTML - The Head Element |
| How to create The HTML <title> Element in <Head> | HTML - The Head Element |
| How to create The HTML <style> Element in <head> | HTML - The Head Element |
| How to create The HTML <link> Element in <head> | HTML - The Head Element |
| How to create The HTML <meta> Element in Head | HTML - The Head Element |
| What is The HTML Viewport in Head | HTML - The Head Element |
| How to use HTML Viewport in Head | HTML - The Head Element |
| How to create The HTML <script> Element in head | HTML - The Head Element |
| How to create The HTML <base> Element in head | HTML - The Head Element |
| Full Example of HTML Viewport in Head | HTML - The Head Element |
| Example with Viewport | HTML - The Head Element |
| Example without Viewport | HTML - The Head Element |
Read Full: | HTML - The Head Element |
Category: | Web Tutorial |
Sub Category: | HTML - The Head Element |
Uploaded: | 1 year ago |
Uploaded by: | Admin |
Views: | 6 |
Ref on: | View |