htmlcssaccessibilitymobile-chrome

Why some of the sites don't respect Text scaling in Chrome mobile browser?

Case in point: using latest Chrome version on Android 11 on Pixel 3a.

Text scaling is set to 100% in browser settings. If I navigate to CNN.COM the font is rather too small for me to read. If I change the Text scaling to 150% the font becomes larger and I can read it easily. This is, IMO, how it is supposed to work.

On the other hand if I navigate to APNEWS.COM changes to Text scaling make no difference whatsoever.

Can someone explain what the difference between these sites is as far as Text scaling goes? It is probably some setting in CSS.

Or, to reduce it to a very simple page that doesn't respect font scaling:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test</title>
</head>
<body>
<div id="container">
This is a test page
</div>
</body>
</html>

How can that page be modified to respect Font scaling setting in mobile Chrome browser?

Solution

  • Both the websites should ideally respect the accessibility settings and scale the font accordingly because text-size-adjust is set to 100% for both. Setting it to none would disable font adjust in most cases. (see font boosting and this answer regarding that also.)

    But, it still doesn't work for APNEWS.COM, which is related to another issue on chrome on android

    As soon as I set float:left on any element, it magically starts working not working

    working

    (ref: https://stackoverflow.com/a/19825624/2229899)