html - 是什么导致桌面与 iOS 中的元素高度差异

Question

我正在测试一个滚动元素，发现移动（iOS）和桌面浏览器之间存在一些奇怪的差异。如果您在 iPhone 和桌面上加载此测试网站并检查滚动容器的内容，我注意到在 iOS 上计算的<p>元素内容高度大于桌面上的内容高度。

这似乎是与字体渲染相关的事情，因为示例站点的 css 非常少。我检查了我能想到的所有相关 css 道具（如font-size,line-height等），但它们在两边都具有相同的值。

在下图中<p>，iOS 上的元素总高度为 40px（20px 边距 + 20px 内容），桌面上的总高度为 38px（20px 边距 + 18px 内容）。这使得scrollHeight容器元素的总和在 iOS 上为 4000px，在桌面上为 3800px。

我在 webkit 错误跟踪器中找不到任何相关的错误，而且我目前没有要测试的 android 设备或任何类型的表格，所以我只能在我的 iPhone 和台式机上进行测试。这种行为可以在任何浏览器中重现。

我尝试过的事情

1. 其他字体仍然可以找到超过一个像素的差异
2. 嵌入谷歌字体以测试它是否与移动端和桌面端的原生字体有关
3. 而不是 100 个段落，只使用一个段落，但有 100 行文本
4. 将-webkit-text-size-adjust道具设置为none
5. 使用了一些 CSS 重置，但差异仍然存在

有人对此有提示吗？

桌面浏览器

移动浏览器

标签： htmlcssioswebkitfont-size

Answer 1

我对 webdev 很陌生，但我会尝试为段落使用特定的行高