hello-css Small text size on MobileSafari

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:

Aug 21 '19 09:08 edurur

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

Aug 21 '19 10:08 arp242

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

Aug 21 '19 15:08 edurur

https://github.com/arp242/hello-css/blob/7356f40e82375015644eecd954b877a06d0fcb9a/dist/base.min.css#L37

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

Aug 22 '19 06:08 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.

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

Aug 22 '19 21:08 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.

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

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

Aug 23 '19 07:08 edurur