Small text size on MobileSafari

[edurur]

I absolutely love this CSS template. But when I test webpage with MobileSafari text size appears relatively small. See attached screenshots for reference.

MobileSafari default:

MobileSafari with reader mode activated:

[arp242]

Which device do you have? It scales down some text on mobile depending on screen size, but maybe it's a bit too much. I find it looks kind of okay on my iPhone SE (but that's probably not the most common size).

[edurur]

I got iPhone 6S. It got .7” more screen compared to SE.

[edurur]

hello-css/dist/base.min.css

Line 37 in 7356f40

html { font-size: 12px; line-height: 150%; }

I just tested with Chrome DevTools, changing 12px to 18px seems okay. But its gonna break other media sizes, should fix that too.

[arp242]

18px seems rather huge to me. The default desktop size is 16px. Generally you want to make the fonts a bit smaller on mobile devices, not larger.

I changed it from 12px to 14px on my site (arp242.net), and at a glance that seems about right to me on my iPhone SE? Need to test some more later (maybe I should increase line-height a wee bit, too).

[edurur]

18px seems rather huge to me. The default desktop size is 16px. Generally you want to make the fonts a bit smaller on mobile devices, not larger.

Yeah, I looked desktop size later, 18px seems okay for me but not for the sake of consistency.

this low-quality picture for real world comparison. iPhone 6S 4.7", iPhone 5S (same screen size as your SE) 4", Samsung Wave 3.3" (ancient phone with ancient browser)

Also 14px is better and usable, 12px was way too small, I guess you should change size for all other media sizes.