移动设备上的 Safari - 计算的样式与给定的样式不同

问题描述

我正在编写一个 Angular (v.9) Web 应用程序，它在滚动面板上包含很少的图块。当给定的选项出现问题时，我会设置模糊的灰色背景，上面有文字。它在桌面 chrome/firefox/edge 和移动 chrome/firefox 上运行良好。但是，当我使用 Safari 在 iOS 上测试它时，文本对于磁贴来说变得太大了。即使我在“p”元素本身上设置了 font-size 属性：

<p style="font-size: 14px">

有时计算样式会显示 21px。

如您所见，我用红色矩形标记了它。此外，该问题并未出现在所有磁贴上 - 正如您所看到的蓝色磁贴看起来不错 - 字体大小为 14 像素。不幸的是，特定磁贴上出现的问题似乎是完全随机的。
我使用 browserstack 进行测试，问题仅出现在所有带有 Safari 的 iPhone（检查 8、10、11、12）上。运行 Chrome 不会产生问题。
无法扩展“字体大小”树，所以我不知道该值来自哪里，我没有在任何地方设置 21px。
您有什么想法可以强制 Safari 使用给定的字体大小吗？我已经尝试了多种技巧，例如使用 !important，根据某些属性更改大小，甚至在单击时设置不同的字体大小 - 适用于除 Safari 之外的所有浏览器。

解决方法

试试这个（仅适用于 iPhone）

@media screen and (max-device-width: 480px){
  body{
    -webkit-text-size-adjust: none;
  }
}

并确保您的代码具有正确的设备元标记

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

,

这是我用于 Safari 浏览器的 mixin

@mixin safari-only {
  @supports (-webkit-marquee-repetition: infinite) and (object-fit: fill) {
    @content;
  }
}

您可以在 .scss 文件中使用它，如下所示：

@include safari-only() {
  // your CSS
}