search

Home  >  Q&A  >  body text

css - 在手机上背景显示的问题。

背景设置高度100%，在弹出软键盘后背景会上缩，，，有什么办法解决吗

html{height: 100%;}
        body{
            font: "微软雅黑";
            background: url(image/bj.jpg) no-repeat center center;
            background-size: 100% 100%;
            height: 100%;
        }

伊谢尔伦伊谢尔伦2912 days ago704

reply all(4)I'll reply

  • 迷茫

    迷茫2017-04-17 11:18:08

    Cancel the html, the height of the body is 100%, the background is absolutely positioned using the image, the width is 100%, and then the login box is also centered with the same absolute positioning.

    reply
    0
  • 怪我咯

    怪我咯2017-04-17 11:18:08

    Automatically try width 100 height

    reply
    0
  • PHP中文网

    PHP中文网2017-04-17 11:18:08

    Waiting online, urgent

    reply
    0
  • 高洛峰

    高洛峰2017-04-17 11:18:08

    I briefly tested it with your code, and it seems there is no problem. Although the pop-up keyboard will reduce the available height of the screen, it feels like it is covering the screen. You can't see it until you scroll to the bottom of the page. The keyboard takes up screen space. I suspect it is caused by other styles of the page. (Tested on iPad and Windows Phone)

    <!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
        <style>
            html{
                height: 100%;
            }
            body{
                background: url('test.jpg') no-repeat center center;
                background-size: 100% 100%;
                height: 100%;
            }
        </style>
    </head>
    <body>
        <h1>Test</h1>
        <input type="text" name="name" value="" />
    </body>
</html>

    reply
    0
  • Cancelreply