Responsive Websites <meta name="viewport" content="width=device-width, initial-scale=1">

Question

Everywhere I look (e.g. Web.dev), it tells you that you must use <meta name="viewport" content="width=device-width, initial-scale=1"> in the header of your HTML file, so websites scale on mobile phones.

If you have designed your website in "mobile first" principles, using CSS media queries along with scaleable sizing units such as vh or vw or % rather than px, do you really need the meta tag?

Answer 1

The best answer for this is in a Stack Overflow post:

https://stackoverflow.com/questions/61238548/side-effects-of-removing-width-device-width-from-viewport-meta-tag-when-initi

Relevant quote (emphasis mine):

So.... Why do we need this viewport tag? Well, nowadays, we have media queries which allows us to design for mobile devices. However, this media query depends on the actual viewport's width. In mobile devices, the user agent automatically styles the initial viewport size to a different fixed one (usually larger than the initial viewport size). So if the viewport's width of a mobile device is fixed, the CSS rules we use in media queries won't be executed simply because the viewport's width never changes. Using the viewport tag, we can control the actual viewport's width (after being styled by the UA).

In my own experience working with the web, if there is a standard that applies something in a consistently predictable manner, ignore that standard at your own risk, unless a source of true authority - think John Mueller for SEO - declares otherwise.