更改方向时字体变为粗体

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

信息多于实际解决方案

根据我对本页和本页的工作原理的理解，所有文本都将根据-webkit-text-size-adjust: auto（iOS 的默认设置）或您的设置以横向模式进行重构-webkit-text-size-adjust: 100%。

我不相信该100%设置正在做您可能认为它正在做的事情（试图保持文本大小相同）。相反，它只会影响“如何应用文本膨胀算法”（根据本页）。我无法确切地弄清楚这可能意味着什么；也就是说，100%对于通货膨胀算法来说意味着什么。我的猜测是，根据本页的引用......

第一次渲染网页时，iOS 上的 Safari 会获取块的宽度并确定适当的文本比例，以使文本清晰易读。

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

也许这是因为100%与纵向和横向的宽度差异有关。例如，这款 iPhone 规格为 960 x 640。这可能意味着100%通货膨胀使用 960 x 640 的某种直接关系（例如 960/640 x 100%），计算出为 1.5，这导致了“大胆” ” 的风景文字。如果是这种情况，那么理论上-webkit-text-size-adjust可能需要将66.67%其设置为不受影响（将 1.5 因子返回到 1）。但我不相信它是如此简单。

最终，我认为安德烈·布卡蒂的回答-webkit-text-size-adjust: none;是唯一保证文本大小不会发生变化。但它可能会产生其他影响，也许是不良影响。