Roland Jegorov Roland Jegorov - 1 month ago 20
Android Question

Android font-size brakes UI

On my web project I encountered a problem with android phones. If you just browse a page with default settings all is fine, but if in Settings > Display > Font > I change font-size to e.g. Huge then my UI elements become scaled.

I style my elements using em's mostly.

I tried fixes on topic of font boosting:

html * {max-height:9999999px}


or

text-size-adjust: none


In short, imagine I have 4 buttons stacked at the bottom of the screen horizontally. When I change the font size in android settings the buttons become huge and overlap each other, hence breaking the UI

Please help. :)

UPDATE

The accepted answer suggests that is is not possible from a css/js perspective. There may be some crazy hacks, but nothing worth thinking about for me. So if anyone finds a solution, please do post an answer.

Answer

This is expected behavior from Android Accessibility options.

As far as my knowledge goes there is no way to hack that from external css/js in the browser.

If you have a standalone app you can extend the WebView class and do getSettings().setTextZoom(100) which would ignore the text size from Accessibility.