为什么有些网站不支持 Chrome 移动浏览器中的文本缩放?

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

例证:在 Pixel 3a 的 Android 11 上使用最新的 Chrome 版本。

浏览器设置中的文本缩放比例设置为 100%。如果我导航到 CNN.COM,字体太小,我无法阅读。如果我将文本缩放比例更改为 150%,字体会变大并且我可以轻松阅读。这是,IMO,它应该如何工作。

另一方面,如果我导航到 APNEWS.COM 对文本缩放的更改没有任何区别。

有人可以解释一下这些网站在文本缩放方面的区别吗?这可能是 CSS.

中的一些设置

或者,将其简化为不考虑字体缩放的非常简单的页面:

<!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>

如何修改该页面以符合移动 Chrome 浏览器中的字体缩放设置?

现在请原谅我的回答,因为这可能有点复杂,但我们开始吧:

因此开发人员确实可以选择添加 CSS 属性,例如 'text-size-adjust' 以易于阅读的方式控制文本。现在该属性可能不适用于某些浏览器,例如:Firefox、Internet Explorer 和 Safari。

现在我确实查看了这两个站点,看起来它们都有 'text-size-adjust' 和它的 webkit 版本。所以我也会得出一个结论,文本的移动响应能力也会因浏览器本身而异。

这两个网站 最好 尊重辅助功能设置并相应地缩放字体,因为两者的 text-size-adjust 都设置为 100%。在大多数情况下,将其设置为 none 将禁用字体调整。 (参见字体提升和 this answer 相关内容。)

但是,它仍然不适用于 APNEWS.COM,这与 chrome android

上的另一个问题有关

只要我在任何元素上设置 float:left,它就会 神奇地 开始工作

(参考:)