Roland Jegorov Roland Jegorov - 11 months ago 81
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}


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


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 Source

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.