[marcosdumay]

> Which, I never understood why this is necessary in the first place (I'm not an experienced web dev).

It's because the first phone browsers had an insane default, and the standards body decided the insanity should be kept for backwards compatibility.

Having a viewport meta turns the insanity off, but only if you set the content area.

[happytoexplain]

Oh, thanks, I think I see. Before we had to think about mobile, any web page that wasn't just a block of text (e.g. inline images, side bars, etc) had bad/broken layout at small widths. Instead of waiting for the whole world to fix their websites, mobile browsers just shrank them a bit. The browser couldn't distinguish between a website that looked good and bad on mobile, so it shrank all of them. And because the web is inherently a slave to backwards compatibility, it's that way forever now.

Mobile browsers do the shrinking by messing with viewport defaults, so we fix it by re-applying those defaults.

I think the MDN doc's only mistake was describing "device-width" as "100% viewport width", since that seems like circular logic.

[marcosdumay]

> Instead of waiting for the whole world to fix their websites, mobile browsers just shrank them a bit.

What comically never fixed anything. But yeah, that's the rationale.

AFAIK, mobile browsers only actually managed to display non-text sites when pinch-to-zoom was invented and the sites started to include the viewport meta. And they only managed to display text-only sites by reflowing the contents. The shrinking the viewport era was a deep local minimum of usability.