4

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?

1 Answer 1

4

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.

1
  • The StackOverflow answer makes things very clear. "If there is a standard that applies something in a consistently predictable manner, ignore that standard at your own risk" - I completely agree with that sentiment, but without the clear explanation provided, it is not easily determined what the risk is exactly. Now I'm digressing. Thanks for the pointer to a clear understanding 🙂 Jan 6 at 7:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.