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

Posted 2023-02-23

【中文标题】移动设备上的 Safari - 计算样式与给定不同

【英文标题】：Safari on mobile - computed style is different than given

【发布时间】：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 以外的所有浏览器。

【参考方案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 文件中添加了

【参考方案2】：

这是我用于 Safari 浏览器的 mixin

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

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

@include safari-only() 
  // your CSS