为什么容器大于 50% 时字体大小会发生变化？

Question

这是一个小测试页。在桌面上，我觉得很正常。

<html>

<head>
  <meta content="width=device-width, initial-scale=1.0" name="viewport">
  <style type="text/css">
    div {
      background: green;
      font-size: 15px;
    }
  </style>
</head>

<body>
  <div style="width:10%">10%</div>
  <div style="width:20%">20%</div>
  <div style="width:30%">30%</div>
  <div style="width:40%">40%</div>
  <div style="width:50%">50%</div>
  <div style="width:60%">60%</div>
  <div style="width:70%">70%</div>
  <div style="width:80%">80%</div>
  <div style="width:90%">90%</div>
  <div style="width:100%">100%</div>
</body>

</html>

但是在我的 iPhone 上它有一个奇怪的行为。在肖像模式下一切正常。 但是在横向模式下，浏览器会计算不同的字体大小，尽管它们都设置为 15px。关于字体大小，我有什么不明白的地方吗？我需要它们看起来都一样。

同样的事情发生在 firefox、edge 和 chrome

Answer 1

这不是答案，而是试图向调查此问题的其他人提供更多调试细节。

我重现了 a JSFiddle 中的错误，以便在官方模拟器中轻松检查它。要在模拟器呈现页面时检查页面，请在模拟器中打开页面，然后在主机系统上打开 Safari 并转到设置 → 高级 → 启用显示开发菜单。之后，您可以使用 Develop → Simulator → Show 来检查页面。

根据上述内容，当 phone 处于横向模式时，该错误可重现。
检查页面，元素上的样式按应有的方式显示。但是，查看 computed 样式，我们可以看到新的 font-size 值 21px 出现了，没有继承。
按照样式的参考，我们可以轻松找到 15px 字体大小的定义。

设置 !important 或其他替代配置似乎对此值没有影响。

除了更好的解释，我会推荐 reporting this as a bug in Safari。

Answer 2

我查看了 apple.com 网页，看看他们是否有同样的问题。而他们没有。

他们使用

-webkit-text-size-adjust: 100%;

然后字体大小到处都一样

Answer 3

要了解更多信息并可能找到一些线索，请在 div 上输入一个 ID 并相应地调整您的 CSS。看看结果是否改变。这个应该不需要，但玩弄和尝试通常会揭示一些线索。另外，如果你移动 font-size:15px; 会发生什么？到 div 元素（在宽度属性旁边）？如果这些替代方案有效，您可以将它们视为规避故障的一种方式。

为什么容器大于 50% 时字体大小会发生变化？

Why does the font-size change for container bigger than 50%?

css

mobile-safari

font-size