Yes, it is required.
When people started browsing on desktop browsers (in the 1990s), everyone had a low screen resolution, like 640×480 or 800×600.
But then, in 2007, the iPhone was released. It had a screen resolution of 320×480, which was less than most desktop screens at the time. So consider the following HTML code:
<!DOCTYPE html>
<html>
<img src="/reallylargeimg.jpeg" style="width:640; height:480;" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut enim ex, sagittis id erat nec, imperdiet posuere erat. Mauris pharetra neque quis venenatis sagittis.</p>
</html>
Then, because the image is really large, the Web page was larger than the iPhone. Additionally, it uses static width and height.
So they scaled down the page. It looks really bad without the viewport tag, like above.
Apple also released the viewport tag. Here, you can set a custom device width:
<meta name="viewport" content="width=200px" />
This sets the screen width to 200 pixels. A more widely used solution is:
<meta name="viewport" content="width=device-width" />
which sets the width to the screen width.
But we also want to control the scale. Here's how: add the "initial-scale" property. We have something like this:
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
Without this tag, websites look really small, forcing the user to zoom in. But with that tag, everything is solved.
So yes, the meta viewport tag should be used on all websites and is mandatory if you want a good user experience. You may also need to use media queries to change CSS for different screen widths, like collapsing a menubar into a hamburger menu. The meta viewport tag won't do this for you, but you should.
@media only screen and (max-width: 600px) {
#hamburgermenu {
display:block;
}
#menubar {
display:none;
}
}
@media only screen and (min-width: 600px) {
#hamburgermenu {
display:none;
}
#menubar {
display:block;
}
}
So the finished page should look something like this. It's a crude example of a Web site, but it should work as expected: showing a menu at 600px and showing a menubar above 600px.
var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.display === "block") {
console.log('closed!');
content.style.display = "none";
} else {
content.style.display = "block";
console.log('opened!');
}
});
}
@media only screen and (max-width: 600px) {
#hamburgermenu {
display: block;
}
#menubar {
display: none;
}
}
#hamburgermenu {
position: fixed;
top: 0;
width: 100%;
background-color: aqua;
border: 1px solid black;
}
@media only screen and (min-width: 600px) {
#hamburgermenu {
display: none;
}
#menubar {
display: block;
}
}
li {
list-style: none;
cursor:pointer;
}
li::before {
content: "→ ";
user-select: text;
-o-user-select: text;
-ms-user-select: text;
-moz-user-select: text;
-webkit-user-select: text;
}
::selection {
background-color: #b3d4fc;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<!--over here-->
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>demo</title>
</head>
<body>
<div id="hamburgermenu">
<button class="collapsible">Open Menu</button>
<ul style="display:none;">
<li onclick="console.log('option 1!'); alert('1');">Option 1</li>
<li onclick="console.log('option 2!'); alert('2');">Option 2</li>
<li onclick="console.log('option 3!'); alert('3');">Option 3</li>
</ul>
</div>
<div id="menubar">
<button onclick="console.log('option 1!'); alert('1');">Option 1</button>
<button onclick="console.log('option 2!'); alert('2');">Option 2</button>
<button onclick="console.log('option 3!'); alert('3');">Option 3</button>
</div>
<br>
<p>Resize the window to see the media query effect.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut enim ex, sagittis id erat nec, imperdiet posuere erat. Mauris pharetra neque quis venenatis sagittis.</p>
</body>
</html>
