是什么导致桌面与 iOS 中的元素高度差异 我尝试过的事情桌面浏览器移动浏览器

如何解决是什么导致桌面与 iOS 中的元素高度差异 我尝试过的事情桌面浏览器移动浏览器

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

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

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

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

我尝试过的事情

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

有人对此有任何提示吗？

桌面浏览器

移动浏览器

解决方法

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