4

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?

TylerH
  • 20,799
  • 66
  • 75
  • 101
Joe Schmoe
  • 1,574
  • 4
  • 23
  • 48
  • 1
    Does this answer your question? [How to prevent mobile devices to scale font size](https://stackoverflow.com/questions/31917088/how-to-prevent-mobile-devices-to-scale-font-size) – GrafiCode Aug 22 '21 at 15:35
  • @GrafiCode: not really, it tries to answer an opposite question. – Joe Schmoe Aug 22 '21 at 15:46
  • 3
    Your question is "*Why some of the sites don't respect Text scaling*". The question I linked is "*How to prevent mobile devices to scale font size*", containing answers trying to explain how some sites do not respect text scaling. Most of these answers are CSS related, exactly as you predicted ("*It is probably some setting in CSS*"). – GrafiCode Aug 22 '21 at 23:51
  • 1
    I don't see how the answers in that link do not answer your question. Please elaborate the differences. – Alexandre Elshobokshy Aug 30 '21 at 09:22
  • 1
    The difference is that both the websites in the question set the same text-size-adjust property, but still we can see different results – Palash Bansal Sep 01 '21 at 19:44

2 Answers2

1

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)

Palash Bansal
  • 708
  • 4
  • 9
  • Thanks, bounty awarded. How did you achieve this screenshot? Chrome is running on emulator and Developer Tools on desktop itself? – Joe Schmoe Sep 02 '21 at 12:32
  • 2
    No, it's a physical device(Oneplus 7 pro) connected via USB. You can debug mobile chrome by going to chrome://inspect on your desktop. (USB debugging needs to be available). docs: https://developer.chrome.com/docs/devtools/remote-debugging/ – Palash Bansal Sep 02 '21 at 13:52
  • Would you be so kind as modify HTML I posted to behave this way? I added style="float:left; text-size-adjust:100%" to the div tag but it makes no difference – Joe Schmoe Sep 02 '21 at 18:09
0

Now you will have to excuse my answer, as this can be a bit complicated, but here we go:

So developers do have options to add in CSS properties such as 'text-size-adjust' to control the text in a way where it can be easy to read. Now that attribute may not work with some browsers such as: Firefox, Internet Explorer, and Safari.

Now I did take a look at both sites and it looks like they have 'text-size-adjust' and the webkit version of that too. So I would also come to a conclusion that the mobile responsiveness of text varies on the browser itself too.

Peter Missick
  • 146
  • 8