I was reading this great post on the HTML head elements when I came across the viewport meta tag.
I have always wondered how some sites would render on mobile devices as if they were rendered on a larger screen and would be zoomed out. Naturally, I started looking around. I started with the MDN docs on viewport. It has a very clear picture on how this tag came out to be.
The viewport meta is not part of the web standard. It was introduced by Apple for Safari and has been adopted by other browsers. Safari has a very detailed documentation on using the viewport meta.
The viewport meta looks like this:
<meta name="viewport" content="width=device-width, initial-scale=1">
In most articles about writing html, the above tag would be included right after the charset meta and for good reason. It ensures that any web page we are developing is always rendered to the width of the device meaning we have to write responsive pages.
The width property takes a number or the key word device-width. If we specity a number, say 640, then the page would always be rendered at 640px when the screen size is smaller than or equal to 640px. For larger screens, the browser would simply take up the entire width.
So, when would you not want to set width to device-width? Ideally, never. Always develop mobile responsive web pages. But, if you have some legacy apps or sites that aren't mobile responsive or you can't get around to making your pages responsive right away, consider changing the device-width to a screen size at which the page will not completely break and still be somewhat usable (albeit with a lot of zooming in).
You can also completely remove the meta tag. Browsers will automatically render the page at 980px for smaller screens. From what I checked, Safari, Chrome and Firefox all render pages at 980px. However, I wouldn't recommend it as lighthouse checks that the viewport meta tag is present in a page and contains the text width=. Even if 980px would work for you, specify it in the meta as width=980 instead of removing it.