-2

In the header of my page code I experimented with viewport as seen here:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
<style>
body {
font-family: Verdana, sans-serif;
font-size: 13px;
}
div {
width: 600px;
border: 2.5px solid;
}
div.info {
float: right;
width: 340px;
height: auto;
background-color: blue;
color: white;
padding: 3px;
}
</style>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Page</title>
</head>
<body>
<div>
<H1>This Is A Test</H1>
<P>And in today's news...</p>
</div>
<div class="info">
<p>More news to come</p>
</div>

What are the benefits of including viewport in the header of a page when doing HTML? Is it good practice to include one in a HTML5 page?

avenas8808
  • 1,639
  • 3
  • 20
  • 33

2 Answers2

1

The Bootsrap documentation:

Bootstrap is developed mobile first, a strategy in which we optimize code for mobile devices first and then scale up components as necessary using CSS media queries. To ensure proper rendering and touch zooming for all devices, add the responsive viewport meta tag to your <head>.

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

Further reading:

koder613
  • 1,486
  • 5
  • 21
1

Essentially, web sites have become more complex as more and more different types of devices access it. You can no longer expect the user to have a 4:3 ratio screen, or even a 1:1 ratio between pixels on the device and CSS pixels.

Devices, for their part, can't assume a web page will be properly formatted for their type of screen.

The viewport meta tag acts as a bridge between all this, allowing the page to suggest to the device a few things about how the content should be shown.

For instance, the width=device-width instruction tells the browser, "render the width of this page as the width of your screen". In other words, don't render the page wider than the devicr and then zoom out and try to fit all of this on the screen as if it were a page that wasn't formatted for mobile devices (a behavior it would otherwise do to accommodate older, non-responsive pages that would be cut off).

So without that line, the behavior you will most likely see is the phone or small screened device displaying the page as if it were not designed for a mobile screen. It would instead render it wider and zoomed out, because it can't assume the page can accommodate the screen ratio properly.

There are other settings, such as the initial zoom, that you can use, but the line as you have it in your answer is by far the most common implementation and works well for most cases.

W3 Reference

tmdesigned
  • 2,098
  • 2
  • 12
  • 20