CSS-HTML 视口页面

Question

我正在处理 HTML 页面，在智能手机呈现时，页面在内容末尾显示白色部分（注意，内容在背景处结束）。 Screenshot

我正在使用以下 CSS/HTML 规则：

<meta name="viewport" content="width=device-width, initial-scale=0" >    
@media only screen {

    html{width:100%;
    height:100%;
    }

    body {background-image:url("sf.png");
    background-repeat:no-repeat;
    background-size:auto;
    background-attachment:fixed;
    }`

有人知道为什么会这样吗？

Answer 1

尝试background-size:cover; background-position: center center

这会扩大图像以覆盖所有区域

CSS-HTML 视口页面

CSS-HTML viewport page

html

css

viewport

smartphone