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

Question

我运行遇到了一个非常棘手的运行问题，我无法真正理解这里发生的事情。当我意识到 Safari 中的默认字体大小与 Chrome 或 Firefox 中的不同时，我正在研究我最近的 React App 的主题。起初我认为这与响应式字体大小有关，因为我知道 Safari 以不同方式处理 rem 值。因此，出于测试目的，我创建了一个全新安装的 CRA 并测试了一个 header 和一个固定字体大小的段落：

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 有关...

如果有人遇到同样的问题，我会很高兴。

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

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

Create React App modifies font size in Safari

css

safari

create-react-app