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

标签 android css html

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

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

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

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

最佳答案

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

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

关于android - 随着软键出现在 Android 设备上,我在 Android 中的网站的背景图片越来越小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28861160/

相关文章:

PHP电子邮件表单发件人名称而不是电子邮件?

CssLinkResourceTransformer 没有修改 css 文件中存在的 URL

javascript - 使用 JavaScript 关闭窗口

javascript - 我如何在周末使用 javascript 更改图片?

java - 在 AlertDialog 中检索用户信息

android - android studio 中的 Jacoco 代码覆盖率

java - 互联网连接失败

java - TabLayout 中的选项卡没有填满整个 ActionBar

jquery - 悬停效果社交网络图标

html - 如何正确居中对齐拆分为 2 :1 ratio 的两个相邻框的内容