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

问题描述

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

标签： htmlcssaccessibilityweb-accessibility

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

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

一旦我设置float:left任何元素，它就会神奇地开始工作

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

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

问题描述

解决方案

推荐阅读