如何在 iOS 10.3.1 中修复 Safari 的 html 边距底部错误

Posted 2023-02-22

【中文标题】如何在 iOS 10.3.1 中修复 Safari 的 html 边距底部错误

【英文标题】：How to fix Safari's html margin bottom bug in iOS 10.3.1

【发布时间】：2017-10-15 05:52:16

【问题描述】：

我注意到在 ios 10.3.1 中，在使用 safari 并激活虚拟键盘时，您可以一直滚动页面并在 html 元素和虚拟键盘之间留出空白空间（与正文颜色相同）。

你可以看到蓝色区域是检查器认为的 HTML 元素，虚拟键盘和 HTML 之间有一个白色间隙（如果我将正文背景设置为黑色，则为黑色）。

请注意，此间隙不会自动出现。当键盘出现时，您必须向上滚动。我注意到这一点是因为我使用 javascript 滚动到底部以修复中文 9 按钮键盘的错误（它将覆盖屏幕底部，恰好是 textarea）。

【问题讨论】：

这里提到的相同主题：***.com/questions/33757554/…

【参考方案1】：

在 safari 中一直滚动到底部时，我遇到了类似的问题，即出现空白区域（或正文设置的任何颜色）。我在 Chris Coyier 的blog post 中找到了这个令人难以置信的解释：

将以下元数据添加到您的 HTML 头部：

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

【参考方案2】：

有同一个包。我用 css 修复它。

html, body 
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;

【参考方案3】：

你可以用这个：

min-height: 100vh;
min-height: -webkit-fill-available;

第二行将推动该元素填满屏幕。

这里有更多关于黑客的信息：https://css-tricks.com/css-fix-for-100vh-in-mobile-webkit/

【参考方案4】：

使用库。例如，您的问题是使用垂直高度设置为 100 的引导程序中的一项微不足道的任务。

<div class="vh-100"></div>

【参考方案5】：

我有一个类似的问题，画布元素占据了网页的高度，但当我滚动时它下面有一些空白。我将画布设置为display: block;。这为我解决了这个问题。这是我问why is there white space under the canvas when I scroll down 的问题。尝试将元素的 display 属性更改为 block，看看是否有帮助。

【参考方案6】：

最近，我在使用 Cordova WebApp 和 iOS10 时遇到了类似的情况。当时的问题是，主视图容器的高度为 100% 而不是 100vh。查看您的 CSS 或使用更多信息更新您的帖子。