【发布时间】：2020-05-25 03:15:51
【问题描述】：
Safari（我使用的是 iOS 13，最新版本）具有某种自动字体大小调整行为，如有必要，会放大字体以使其在 iPhone 上易于阅读。基本上，如果您的布局足够简单和灵活以允许不同的字体大小，这是响应式布局的替代方案。
很多人不喜欢这种行为，当你在谷歌上搜索它时，你大多会得到如何防止它的食谱。
但我确实喜欢这种行为，并希望将其用于主要由文本组成的简单网站。
问题在于 Safari 不会以这种方式处理所有文本，而且（至少对我而言）完全不清楚这种行为取决于什么。
因此，例如，如果您的正文文本为 14 像素，并且希望某些文本具有更大的字体大小（标题，无论......），比如 18 像素，可能会发生 Safari 会放大 14 像素的文本，但不会放大 18 像素的文本。结果是，应该比正文大的文本实际上更小，这当然破坏了整个布局。更改字体 sometimes 似乎具有相同的意外效果。正如我所说，当 Safari 执行此操作和不执行此操作时，它似乎完全不稳定。我已经为此奋斗了一个多星期，它几乎让我发疯。
这是一个简单的示例（但请注意，只有将其放在网络服务器上并在 iOS 上的 Safari 中观看，您才会看到此问题）。
<!DOCTYPE html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Size Test</title>
<style>
body {
font-size: 14px;
font-family: serif;
}
.Head {
color: red;
font-family: sans-serif;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
diam voluptua.</p>
<p class="Head">Foo Bar</p>
<!-- <p class="Head">Foo Bar</p> -->
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
voluptua.</p>
</body>
</html>
如您所见，我有一个只更改字体类型的标题类（红色只是为了指出问题）。这足以让 iOS 上的 Safari 在放大字体时忽略它；也就是说，虽然字体大小不应该改变，但实际上 Foo Bar 行比文本的其余部分要小得多。
但是，只要您至少两次使用这个类，这种情况就会发生变化。因此，如果您取消注释代码示例中的第二个 Foo Bar 行，那么在 iOS 上的 Safari 中，both 行会突然以正确的字体大小显示.当然，这种行为完全是荒谬的。如果我只需要这个类一次，我不能为了让 Safari 正确显示它而使用它两次。
经过看似无休止的尝试和错误，我找到了一个解决方法：如果段落包含至少 1 个 <br> 标记和至少 1 个字符，iOS 上的 Safari 将始终正确显示字体大小. （同样，这完全没有意义......）
因此，如果您使用<p class="Head">Foo Bar<br>&nbsp;</p>，然后将 .Head 类的下边距设置为足够大的负值以补偿意外的第二行，它确实有效 - iOS 上的 Safari 将始终显示放大的字体大小，即使该类仅使用一次（至少在我的测试中是这样）。
当然，这是一个非常丑陋的解决方法。
所以，我的问题基本上是是否有人知道一个不那么丑陋但同样可靠的解决方法。
【问题讨论】：