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

Question

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

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

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

Answer 1

试试这个（仅适用于 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;" />

Answer 2

这是我用于 Safari 浏览器的 mixin


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

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

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

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

Safari on mobile - computed style is different than given

safari

ios

browserstack

angular