css - Safari Mobile 键盘顶部的空格问题

Question

我在 Safari mobile 上遇到问题，在专注于输入元素并打开键盘后，在键盘顶部添加了一条空白。

这也破坏了我的应用程序的样式，因为“高度：100%”不再起作用，并且在键盘关闭后元素没有适应回填充设备的整个高度。

标签： csskeyboardheightmobile-safari

Answer 1

解决此问题的解决方案是确保所有父容器的高度为 100%（包括 html、body 等），然后确保可滚动容器/包裹整个页面的最后一个元素具有以下样式：

position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-overflow-scrolling: touch;

确保这些样式仅应用于移动视口，因为它可能会影响您的桌面样式。