html - 字体大小计算动态大小Safari失败

Question

我使用 PostCSS响应式插件，我得到的生成代码如下：

h1 {
 font-size: calc(28px + 20 * ((100vw - 320px) / 880));
}

http://codepen.io/umbriel/pen/WwLBxQ

在 Firefox、Chrome 和可能的其他现代浏览器中运行良好。但是Version 9.0.3，正如我链接的 Codepen 所证明的那样，野生动物园完全失败了。

有谁知道这是为什么？

编辑：我可能找到了罪魁祸首，似乎 vw 与 calc 结合起来是我尝试过的问题。有没有办法让它工作？

Answer 1

如果有人在 2020 年看到这个并且感觉有点失落，因为 Safari 仍然表现得很时髦（尤其是在处理动态字体大小时），看看这个codepen

这不是我的，但它通过使用

min-height: 0vw;

在“文本类”上。我最终将它用作全局，因此我不需要在任何我想使用它的地方都引入课程。

希望有帮助。

Answer 2

我在 Safari 10.0.1 中尝试合并vw&px单位时遇到了同样的问题。

使用%字体大小值而不是px为我解决这个问题。我假设基本字体大小为 16px。

html {
  font-size: 16px;
}

h1 {
  font-size: calc(175% + 20 * ((100vw - 320px) / 880));
}

<h1>Responsive title in Safari 10</h1>

Answer 3

calc或者vh/vw in calc在 Safari 和 android 浏览器中可能存在问题。这是一个已知问题，它已在 Safari 7+ 中得到修复，但报告的问题仍然很少。

-webkit-calc可以用作后备，它在 Safari 中运行良好。

Safari 的示例修复：

sometag{
    width: 48%;
    width: -webkit-calc(50% - 20px);
    width: -moz-calc(50% - 20px);
    width: calc(50% - 20px);
}

来源：SO 问题：为什么 CSS calc() 函数对我不起作用？

另一个旧修复供您参考：使用 jQuery()

参考 ：

1. 体积/体积

2. 计算

3. Safari 计算测试

Answer 4

我解决这个问题的方法是引入纯 CSS 后备，不支持 CSS calc 的旧浏览器只能读取。

h1 {
 font-size: calc(28px + 20 * ((100vw - 320px) / 880));
 font-size: -webkit-calc(28px + 20 * ((100vw - 320px) / 880));
 font-size: -moz-calc(28px + 20 * ((100vw - 320px) / 880));
}

Answer 5

调整大小时，Safari 13.1.1 似乎再次遇到了动态字体大小（基于计算的视口宽度）的问题。所以这行不通：

html {
font-size: calc(1em + 1vw)
}

我刚刚找到的解决方法：

html {
font-size: 1vw; /* initialise it first without calc() */
}

body {
font-size: calc(1em + 16px); /* 1vw = 1em here and 16px is the default browser value */ 
}

Answer 6

似乎这已在此处修复：
https ://bugs.webkit.org/show_bug.cgi?id=224614

应该在 Safari 的未来版本中。