更改方向时字体变为粗体

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-adjust: 100%。

我不相信100%设置正在执行您认为它正在做的事情（尝试保持文本大小相同）。相反，它只影响“如何应用文本膨胀算法”（每this page）。我无法准确追查这可能意味着什么;也就是说，100%对通胀算法的意义。我的猜测是基于this page's引用......

  

第一次呈现网页时，iOS上的Safari获取宽度   块并确定适当的文本比例，以便文本   清晰可辨。

...由于程序仅在“第一次呈现网页时”发生，一旦设备从纵向转为横向，通胀算法将根据屏幕的宽度变化“增长”文本，即使设置为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）。 但我不相信它是如此直接。

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

Answer 2

尝试用

替换css

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

Answer 3

尝试添加以下内容......

-webkit-transform：translate3d（0,0,0）;

Answer 4

嗯，试试

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

而不是

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

在this thread中找到它，它既适用于线程中的人，也适用于我。