使用 Next.js 创建的网站上的文本在 iPhone/iPad 上比其他设备上的尺寸更大

Question

我已经尝试解决这个问题几天了，但无论我尝试什么，都没有效果。

在我的 Android 手机和 PC 上，我的网站如下所示：

但在 iPhone 和 iPad 上，文本尺寸较大，会导致样式发生不必要的变化：

如您所见，由于文本较大，在某些组件中文本超出了圆圈，这显然是我不希望的。

在我发疯之前，有谁知道如何解决这个问题吗？

我使用 next.js 来创建应用程序和所有样式的样式组件。

我在 _document.js 文件中的标签如下所示：

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

我在 globals.js 文件中使用了 Meyer CSS Reset。

我真的很感激任何帮助，因为我不知道我还能做什么......

谢谢。

编辑：对于更多上下文，我认为这不是 Next.j 问题，很可能与 css 有关。

这是 globals.js 中的 CSS 代码（我使用 styled-components 进行样式设置），其中使用 font-size：

body {
  color: ${(props) => props.theme.colors.primary};
  font-family: "Futura", sans-serif;
  font-size: 1.3rem;
  background: linear-gradient(199deg, rgba(252, 252, 252, 1) 0%, 
  rgba(233, 233, 233, 1) 50%, rgba(214, 214, 214, 1) 100%);
  cursor: default;
  transition: 0.5s ease;
  padding: 100px 0 0 0;
  min-height: 100vh;
}

h1,h2,h3,h4,h5,h6,button {
  font-family: "Great-Vibes", sans-serif;
  letter-spacing: 10px;
  line-height: 2rem;
  font-size: 2rem;
  padding-left: 1rem;
  color: ${(props) => props.theme.colors.headings}
}

Answer 1

与大小无关，但它可能会对将来的某人有所帮助： 我对字体

spacing

和

weight

也有类似的问题

如果有人发现 Chrome/Safari 之间的文本样式不同，可能发生的情况是您设置的

font-weight

不是由您的字体参考本身给出的：例如，您的样式为

font-weight: 500

但您的字体导入重量

400, 700

.

通常，浏览器根据提供的字体文件有不同的缩放/调整字体大小/粗细的算法。

因此，浏览器可能会尝试使用最接近的可用字体来可视化文本，或者“模拟”缺失的字体粗细，从而扭曲原始外观。

只需确保您的字体具有所需的粗细或在必要时导入它们