Create React App 修改 Safari 中的字体大小

Question

我遇到了一个非常奇怪的问题，我无法真正理解这里发生的事情。当我意识到 Safari 中的默认字体大小与 Chrome 或 Firefox 中的默认字体大小不同时，我正在研究我最近的 React App 的主题。起初我认为这与响应式字体大小有关，因为我知道 Safari 对待

rem

值的方式不同。因此，出于测试目的，我创建了全新安装的 CRA 并测试了具有固定字体大小的标题和段落：

h1 { font-size: 32px; }
p { font-size: 16px; } 

不幸的是，它再次发生了，结果可以在这里看到：

Chrome / FF 和 Safari 之间大约有 4px 的差异。检查各个浏览器的开发工具时，所有浏览器都显示正确的字体大小（和行高）。

我认为这可能与 Safari 有关（因为该浏览器似乎正在成为新的 Internet Explorer），因此我创建了一个简单的 HTML 5 页面来再次测试该行为。这是结果：

如您所见，一切都按预期显示，这表明它与 Safari 无关。

我也尝试过用

normalize.css

重置CSS，但也没有成功。还有其他人遇到过这个问题吗？

我的设置：

SYSTEM --
Mac OS 11.0.1
Safari 14.0.1
Chrome for Mac 86.0.4240.198
Firefox for Mac 82.0.3

CRA -- 4.0.1
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-scripts": "4.0.1",
"web-vitals": "^0.2.4"

"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"

Answer 1

玩了几个小时，设置测试项目并尝试在 codesandbox.io 上验证结果后，我发现（偶尔）Safari 将 初始缩放级别设置为

125%

。 因为这并不总是如此这种情况我不确定是否与我的系统有关，或者确实与 CRA 和 Safari 有关...

我很高兴听到是否有人遇到过同样的问题。

抱歉，如果我在这里浪费了任何人的时间！

Answer 2

更新我的 React 应用程序中视口的 public/index.html 元标记：

<meta name="viewport" content="width=device-width, initial-scale=1"/>

到

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

似乎在 Safari 上对我有用。