css - 改变方向时字体变粗

Question

我在 html 中使用它:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;">

在 CSS 中:

html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }\

也试过这个:

html { -webkit-text-size-adjust: none; }

但出于某种原因，这种情况发生了:

更新:我尝试删除所有样式以查看是否是我的 CSS 导致了此问题，结果很奇怪:当我不使用任何字体规则时，字体只会变大(它没有放大，因为缩放被 HTML viewport 属性锁定)同样，只有小字体变大，标题保持不变。奇怪@#$%

更新 2:我玩过 html/css 并得出这个结论 - 唯一不会发生文本放大的情况是文本包含在页面的唯一元素内- 例如，如果我的所有内容都是带有文本的 p/span/div，它不会被放大。如果我添加另一个包含文本的元素，页面上的所有文本都会在横向模式下放大。
我试着做了一些研究，浏览了许多移动网站，结果都是一样的——它们都有这种效果。

Answer 1

比真正的解决方案更多的信息

根据我对 this page 的理解和 this page ，所有文本将根据 -webkit-text-size-adjust: auto(iOS 的默认设置)或您对 -webkit-text-size- 的设置在横向模式下进行重构调整:100%。

我不相信 100% 设置正在做您认为正在做的事情(试图保持文本大小相同)。相反，它只影响“文本膨胀算法的应用方式”(根据 this page )。我无法确切地知道这可能意味着什么；也就是说，100% 对于通货膨胀算法意味着什么。我的猜测是，基于 this page's引用...

The first time a webpage is rendered, Safari on iOS gets the width of the block and determines an appropriate text scale so that the text is legible.

...由于该过程仅在“第一次呈现网页时”发生，一旦设备从纵向变为横向，膨胀算法将根据屏幕的宽度变化“增长”文本变宽，即使设置为 100%。

也许这是因为 100% 与纵向和横向的宽度差异有关。例如，this iPhone spec是 960 x 640。100% 可能意味着通货膨胀使用 960 x 640 的某种直接关系(例如，960/640 x 100%)，计算结果为 1.5，这会导致山水文字的“豪放”。如果是这种情况，那么理论上 -webkit-text-size-adjust 可能需要设置为 66.67% 以使其不受影响(将 1.5 系数返回到1). 但我不相信它是如此直接。

最终，我认为 Andrey Bukati 对 -webkit-text-size-adjust: none; 的回答是文本大小不会发生变化的唯一保证。但它可能会产生其他可能不受欢迎的影响。