[happytoexplain]

What is the motivation behind changing font size between mobile and desktop? My understanding is that browsers and apps already show the same font size at roughly the same perceptual physical size based on DPI and likely viewing distance, using relative units (em/rem on web, points on iOS, dp/sp on Android).

I'm guessing it's one of these two things?

1. Designers now disagree with the result of that preexisting calculation.

2. Designers are OK with making fonts on mobile smaller than the ideal reading size so that they can fit more content on screen (doesn't seem like a very designer-y thing to do).

Edit:

Or, #3, this is an alternative to the trick I assumed was ubiquitous:

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

Which, I never understood why this is necessary in the first place (I'm not an experienced web dev). Based on the MDN docs (https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_m...), we're setting the viewport's width to "100% of the viewport width", and initial-scale to "1", both of which sound obviously redundant, and yet if you omit this you get tiny fonts on mobile.

Edit 2:

Scratch theory #3. The author's site and all three of the sites he cites have that viewport line.

[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.