Question

家伙！我有一个包含以下代码的网站：

<html>
    <head>
        <!-- some code here -->
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <div class="screenFourth">
            <div class="container">
                <!-- a lot of tags -->
            </div>
        </div>
    </body>
</html>

所以问题是，如果我在手机上打开网站，它在屏幕右侧有一个空白区域。这是它的形象： Empty space on the right side

css代码如下：

.screenFourth{
    background-image: url(...);
    background-size: cover;
    background-position: top;
    min-height: 1380px;
}

@media screen and (max-width: 760px){
    .container{ width: 100%; margin: 0 auto; }
}

我该如何解决这个问题？谢谢！

Answer 1

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
}

.screenFourth{
    background-image: url(...);
    background-size: cover;
    background-position: top;
    width: 100%;
    min-height: 1380px;
}

@media screen and (max-width: 760px){
    .container{ width: 100vw; margin: 0; padding: 0; }
}

将以下内容添加到CSS文件中。我将背景宽度设置为100％，并将width: 100vw;添加到容器CSS中。 vw是一个css单元，用于设置相对于视口的宽度。我希望这有帮助。

还取出了保证金＆amp;从HTML和Body标签填充。

编辑HTML

<html>
    <head>
        <!-- some code here -->
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=0">
    </head>
    <body>
        <div class="screenFourth">
            <div class="container">
                <!-- a lot of tags -->
            </div>
        </div>
    </body>
</html>

手机上的全宽容器

1 个答案: