Strange resolution issue with Samsung S20

[wekas]

I have a screen shot from a user that looks pretty bad and quite different to what I would expect.
It is from a Samsung S20. I looked up the specs here:

Samsung S20 viewport size, resolution, PPI, screen specs and CSS media queries...

And created an emulator in AVD. See attached image.

However the screen looks completely different than the users. The font size other too.
Both my emulator and using chrome device toolbar mobile mode at 360x800 it looks as expected but the users device looks like a very low resolution.
I can only replicate this if I set the resolution in chrome to 270x545.

Any idea why? Could it be some phone setting?

[wekas]

I just figured out it was the display settings. The font size was set to the max.
I guess I never do this myself so didn’t consider it. I need to be more accessible I guess.

The font size is enlarged whether it is in px or rem/em.

Any ideas how to check this setting from Ionic and adjust for it?

[wekas]

Seem like this is the plugin to use.

Mobile Accessibility - Ionic Documentation

Looks like it works with Capacitor too.

Font size difference caused by Android font size settings

I found the solution using a cordova plugin to disable the user preferred text zoom. You can find the plugin here: https://github.com/phonegap/phonegap-mobile-accessibility and add in the platform ready event: platform.ready().then(() => { [...] if(window.MobileAccessibility){ window.MobileAccessibility.usePreferredTextZoom(false); } [...] });