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

Question

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

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

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

如何避免在软键外观上调整图像大小？

Answer 1

背景图像正在调整大小，因为body实际上正在调整大小。键盘抬起时，页面尺寸会相应调整大小，以便您可以滚动浏览而不会在键盘下隐藏任何内容。有些Android键盘的模式是，它们悬浮在屏幕上的内容上方，而不是放在输入下方，但这是Web设计者无法控制的。

您必须使用background-size: 100% 100%;以外的其他名称。例如，如果您改用background-size: 100%;，则图像将仅根据可用宽度调整大小，因此，当键盘抬起时，垂直空间的减小不会受到影响。您是否真的也需要背景图像垂直调整大小？

Answer 2

当使用百分比时，宽度和高度会根据父div的大小进行调整，该父div可以是正文或顶部父div。

用background-size: 100% 100%;替换background-size:cover;将达到目的

Answer 3

这是我的解决方案：

    var isTouch = window.matchMedia("only screen and (hover: none) and (pointer: coarse)");
    if (isTouch.matches) {

        function getHeight() {
            return screen.height;
        }

        function getWidth() {
            return screen.width;
        }

        var oldWidth =  getWidth();
        var oldHeight = getHeight();

        function setBodyStyleWidthAndHieght() {

            try {
                if (oldWidth === getHeight() && oldHeight === getWidth()) {
                    //The device has been flipped;
                    let temp = oldWidth;
                    oldWidth = oldHeight;
                    oldHeight = temp;   
                }

                document.body.setAttribute("style",oldWidth<oldHeight ? "background-size: auto " + oldHeight + "px;" : "background-size:"+oldWidth+"px auto;");     
            } catch (error) {
                document.body.setAttribute("style","background-size:cover;");
            }
        }
        setBodyStyleWidthAndHieght();
        window.onresize = setBodyStyleWidthAndHieght;
    }