更改方向时字体加粗

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 元素及其文本，则文本不会被放大。但是，一旦添加了另一个具有文本的元素，无论横屏还是竖屏模式下页面上的所有文本都会被放大。
我尝试进行一些研究并查看了许多移动网站，结果是一样的-它们都有这种效果。

- ilyo

---

出于好奇，当页面上实际存在“粗体”文本时，当旋转到横向模式时，它是否会变得更加“粗体”（以便仍然区分“普通”文本和“粗体”文本，即使所有文本都变得更加粗体）？ - ScottS

Answer 1

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

根据此页面和此页面，所有文本都将基于-webkit-text-size-adjust: auto（iOS的默认设置）或您设置的-webkit-text-size-adjust: 100%在横向模式下进行重构。

我不认为100%设置是您所想象的（尝试保持文本大小不变的尝试）。相反，它只影响“应用文本膨胀算法的方式”（根据此页面）。我无法找到确切的含义；也就是说，100%与膨胀算法的含义是什么。我的猜测是，基于此页面的引用...

第一次呈现网页时，Safari在iOS上获取块的宽度，并确定适当的文本比例，以使文本易于阅读。

...由于该过程仅在“第一次呈现网页时”发生，因此一旦设备从纵向变为横向，膨胀算法将根据屏幕宽度的增加而“增长”文本，即使设置为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）。但我并不确定它是否如此简单明了。

最终，我认为Andrey Bukati的答案-webkit-text-size-adjust: none;是唯一保证不会发生文本大小更改的方法。但它可能会产生其他不良影响。

- ScottS

---

感谢您提供详细的答案，我使用了“none”，但是字体仍然会扩大！不同之处在于，当使用“none”或“100％”时，字体大小不会增加。 - ilyo

@IlyaD--事实上，none并没有解决这个问题，加上你在"Update 2"中的观察和你对我的问题的回答中指出"bold"仍然更加粗体，这让我非常倾向于iOS或特定设备渲染存在错误（我不知道你有机会测试过多少不同的设备）。 - ScottS

Answer 2

尝试添加以下内容：

-webkit-transform: translate3d(0,0,0);

- user1957635

Answer 3

尝试用新的CSS替换原有的。

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

- Andrey Bukati

Answer 4

嗯，试试看

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

而不是

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

在这个帖子中找到了它，对于那个帖子里的人和我都起作用了。

- Gene Vayngrib