如何使不同宽度页面的字体大小相同（在 iPhone 上）？答案

【问题标题】：How do I make the font size be the same across different width pages (on iPhone)?如何使不同宽度页面的字体大小相同（在 iPhone 上）？
【发布时间】：2020-06-23 22:42:30
【问题描述】：

我有三个网页使用相同的字体大小（1.875rem 标题文本和 0.96875rem 正文），但它们在 iPhone 上看起来都不同。

Page 1 iPhone Screenshot

Page 2 iPhone Screenshot

Page 3 iPhone Screenshot

我希望第 2 页和第 3 页中的字体大小看起来像第 1 页。

在我的笔记本电脑上一切看起来都不错。每个页面的 HTML 代码如下所示：

Page 1 HTML

Page 2 HTML

Page 3 HTML

我该如何解决这个问题？提前谢谢你。

【问题讨论】：

添加视口元标记通常会有所帮助。将此：<meta name="viewport" content="width=device-width, initial-scale=1"> 添加到您的脑海中，它可以被修复。
谢谢 korki、Pyry Lahtinen 和 Oliver Hnat。我将比例更改为 0.5，现在一切看起来都很好。谢谢！

标签： html css

【解决方案1】：

正如@korki 所说，将此添加到您的<head> 标签中：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

【讨论】：

感谢您的提及！指定这样的元标记总是好的，因为它会解决很多问题（特别是响应式设计）
谢谢 korki、Pyry Lahtinen 和 Oliver Hnat。我将比例更改为 0.5，现在一切看起来都很好。谢谢！

【解决方案2】：

如果您刚开始使用 html，最好制作一个 layout.html 并将所有相同的内容放在该文件中的所有页面上，这称为模板，我总是将其放在头部 Here is a page, where they explain it pretty well 中。我总是在我所有模板的<head> 中只使用<meta name="viewport" content="width=device-width, initial-scale=1.0">

【讨论】：

谢谢 korki、Pyry Lahtinen 和 Oliver Hnat。我将比例更改为 0.5，现在一切看起来都很好。谢谢！