android - 随着软键出现在 Android 设备上，我在 Android 中的网站的背景图片越来越小

Question

我使用 html 和 CSS 创建了一个响应式网页。我已经将背景图片设置如下:

body
{
    background: url('mobile.jpg') no-repeat center center fixed;
    background-size: 100% 100%;
}

当我在 android 设备上测试它时，它在屏幕上看起来很完美，但是当我点击输入框时，软键盘就会出现在屏幕上，这使我的背景图像重新调整大小。

如何避免图像在出现软键时重新调整大小？

Answer 1

背景图像正在调整大小，因为 body 实际上正在调整大小。当键盘出现时，页面尺寸会相应地调整大小，这样您就可以四处滚动，而不会在键盘下方隐藏任何内容。有一些 Android 键盘有一种模式，可以让它们在屏幕上 float 在内容上方，而不是布局在输入下方，但这是网页设计师无法控制的。

您必须使用 background-size: 100% 100%; 以外的值。例如，如果您改用 background-size: 100%;，图像只会根据可用宽度调整大小，因此它不会受到键盘出现时垂直空间减少的影响。您真的需要背景图像也垂直调整大小吗？