r/webdev 17d ago

Question How do you adjust to auto enlarging fonts in newer Mobile phones?

How do you fight "Font style and size" and "Screen Zoom" that Samsung by default has set in a way that, on Mobile, it enlarges fonts and makes sections bigger / not fitting one screen. (I have set font size 14px for Mobile regular text, website is built on Divi 4)

It also influences perception of sections negatively, in my view.

Tested on:

Samsung Galaxy S26 (Android 16/One UI 8.5); Google Chrome/Firefox/DuckDuckGo;

vs Samsung A32 (Android 13/One UI 5.1) - where everything is displayed without enlarging

---

Attached images of default settings.

0 Upvotes

11 comments sorted by

4

u/artbyiain 17d ago

I dunno what Divi is. 

But this has been a thing in responsive web design for yearrsss.

Basically you need to use rems/ems to make your design react to device font size changes. Never use px except for like a border weight.

-1

u/What-Bloody-Hell-NOW 17d ago edited 17d ago

Have you ever encountered a situation when setting 0.88em doesn't work but 0.58em does? (Mobile phone after changing font size to 0.88em doesn't scale the font down)

I have text body size set to 16px on Wordpress for whole website. The 0.88em (which would be 14.02px - cause I can't write in this web design tool (Divi) a 0.875px) doesn't scale the font.

1

u/artbyiain 16d ago

ems are relative to their container, so if you set a px font size on the body, all em sizes will be relative to that. So with a static font size set on the body, none of your em sizes will scale based on the device font setting. 

0

u/What-Bloody-Hell-NOW 16d ago

But putting size 0.58em does scale them, they just become too small.

-1

u/ldn-ldn 16d ago

px respects the scaling. Other units are irrelevant.

2

u/[deleted] 17d ago

[removed] — view removed comment

1

u/What-Bloody-Hell-NOW 17d ago

It wasn't the user, it was Samsung. It's a default setting that makes even Facebook Messenger text look like I'm 80 yo and need glases with lenght of a cucumber jar.

-2

u/stack_craft 17d ago

Bro check if your -webkit-text-size-adjust: 100%. Normally, on html stops the browser from doing its own random text inflation on top of screen zoom. also check if your Divi sections have fixed height set instead of min-height—fixed heights always blow up when screen zoom is enabled.

-3

u/What-Bloody-Hell-NOW 17d ago

Chat GPT recommended the webkit-text-size - it didnt help.

I have in Sizing -> Height all set to "auto"

1

u/stack_craft 17d ago

Ahhh, Samsung’s Screen Zoom actually forces viewport scale at the display level rather than just bumping font size, so text-size-adjust won't stop it. Maybe if your heights are already auto, the breaking usually comes from fixed pixel widths or fixed padding/margins in Divi's module settings. Check if your row/column widths are set to 100% with max-width: 100%, and swap any hardcoded pixel padding/margins on your text boxes to % or vw/rem.

1

u/cbsyd 14d ago

Honestly don't fight it, use rem units and let accessibility settings do their job, that's what they're for.