Horje
How to use HTML Viewport in Head

This gives the browser instructions on how to control the page's dimensions and scaling.

The width=device-width part 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 part sets the initial zoom level when the page is first loaded by the browser.

 


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 with Viewport

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:

Example without Viewport





Related Articles
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

Single Articles
Full Example of HTML Viewport in HeadHTML - The Head Element
Example with ViewportHTML - The Head Element
Example without ViewportHTML - 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



Share on: