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

【问题标题】：Safari on mobile - computed style is different than given移动设备上的 Safari - 计算样式与给定不同
【发布时间】：2021-01-22 16:29:49
【问题描述】：

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

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

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

【问题讨论】：

标签： ios angular safari browserstack

【解决方案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;" />

【讨论】：

元标记对我来说很好。只需添加 -webkit-text-size-adjust: none 还不够，字体仍然太大。然而，后来我采用了一种解决方法 - 我不得不强制重新计算字体大小。所以我在 .html 文件中添加了
并在 ngAfterViewInit() 中添加了 this.initialized = true。我想我可能在其他地方有错误（可能在 scss、html 结构中），但我接受你的回答，因为这显然是我错过的。

【解决方案2】：

这是我用于 Safari 浏览器的 mixin


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

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

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

【讨论】：