1

This question is about detecting if the user changed his font size on his device or browser

CONTEXT :

  • a normal website
  • this website viewed with a
    • desktop (regular browser)
    • mobile in chrome or safari
    • within a webview on a mobile app
    • etc

ISSUE CONTEXT :

When the user decide to activate mobility settings like a bigger font. It could be on a desktop, or a mobile phone.

Mobile phones Android, Apple, etc have different terms and ways to change this and make everything bigger like font size, etc.

ISSUE :

I have some @media only css rules but when the user have a bigger font, there is some kind of conflict happening...

example the media only loads with bigger font, but because the user change his settings, it's even bigger and breaks all the design...

@media only screen and (max-width: somewidth_px)

QUESTION

Is there a universal way to "detect" if the user have some how bigger font setftings ?

and adjust with other css rules or any other suggestions?

Jintor
  • 607
  • 8
  • 32
  • a good starting point could be `var pixelRatio = window.devicePixelRatio || 1;` to get the zoom if the user changed it... – Jintor Jun 30 '23 at 23:33

0 Answers0