为什么有些网站不尊重 Chrome 移动浏览器中的文本缩放？答案

【问题标题】：Why some of the sites don't respect Text scaling in Chrome mobile browser?为什么有些网站不尊重 Chrome 移动浏览器中的文本缩放？
【发布时间】：2021-10-23 05:14:21
【问题描述】：

案例：在 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 浏览器中的字体缩放设置？

【问题讨论】：

这能回答你的问题吗？ How to prevent mobile devices to scale font size
@GrafiCode：不是真的，它试图回答一个相反的问题。
您的问题是“为什么有些网站不尊重文本缩放”。我链接的问题是“如何防止移动设备缩放字体大小”，其中包含试图解释某些网站如何不尊重文本缩放的答案。这些答案中的大多数都与 CSS 相关，正如您所预测的那样（“这可能是 CSS 中的一些设置”）。
我看不出该链接中的答案如何无法回答您的问题。请详细说明差异。
不同之处在于问题中的两个网站都设置了相同的 text-size-adjust 属性，但我们仍然可以看到不同的结果

标签： html css accessibility web-accessibility

【解决方案1】：

两个网站理想情况下都应该尊重可访问性设置并相应地缩放字体，因为两者的text-size-adjust 都设置为100%。在大多数情况下，将其设置为 none 会禁用字体调整。（也请参阅字体提升和this answer。）

但是，它仍然不适用于 APNEWS.COM，这与 Android 上 chrome 上的另一个问题有关

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

（参考：https://stackoverflow.com/a/19825624/2229899）

【讨论】：

谢谢，赏金。你是如何实现这个截图的？ Chrome 是在模拟器上运行，而开发者工具在桌面本身上运行？
不，它是通过 USB 连接的物理设备（一加 7 pro）。您可以通过桌面上的 chrome://inspect 来调试移动版 chrome。（USB调试需要可用）。文档：developer.chrome.com/docs/devtools/remote-debugging
您愿意修改我发布的 HTML 以使其具有这种行为吗？我在 div 标签中添加了 style="float:left; text-size-adjust:100%" 但没有区别

【解决方案2】：

现在您将不得不原谅我的回答，因为这可能有点复杂，但我们开始吧：

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

现在我确实查看了这两个网站，看起来他们也有“文本大小调整”和 webkit 版本。所以我也会得出一个结论，文本的移动响应能力也因浏览器本身而异。

【讨论】：