title: Why some of the sites don't respect Text scaling in Chrome mobile browser?
body: <p>Case in point: using latest Chrome version on Android 11 on Pixel 3a.</p>
  <p>Text scaling is set to 100% in browser settings. If I navigate to <a href="https://cnn.com" rel="nofollow noreferrer">CNN.COM</a> 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.</p>
  <p>On the other hand if I navigate to <a href="https://APNEWS.COM" rel="nofollow noreferrer">APNEWS.COM</a> changes to Text scaling make no difference whatsoever.</p>
  <p>Can someone explain what the difference between these sites is as far as Text scaling goes? It is probably some setting in CSS.</p>
  <p>Or, to reduce it to a very simple page that doesn't respect font scaling:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /&gt;
  &lt;title&gt;Test&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="container"&gt;
  This is a test page
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>How can that page be modified to respect Font scaling setting in mobile Chrome browser?</p>