移动设备上的全宽容器

Question

guys! 伙计们！ I have a website with the following code: 我有一个带有以下代码的网站：

<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>

So the problem is that if I open the website on mobile it has a empty space on the right side of the screen. 因此，问题在于，如果我在移动设备上打开网站，则屏幕右侧会出现空白区域。 Here is the image of it: Empty space on the right side 这是它的图像：右侧的空白区域

css code is the following: 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; }
}

How can I solve this problem? 我怎么解决这个问题？ Thank you! 谢谢！

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; }
}

Add the following to your CSS File. 将以下内容添加到您的CSS文件中。 I've set the background width to 100%, And added width: 100vw; 我将背景宽度设置为100％，并添加了width: 100vw; to the container CSS. 到容器CSS。 vw is a css unit which sets the width relative to the view port. vw是一个css单位，用于设置相对于视口的宽度。 I hope this help. 希望对您有所帮助。

Also took out the margin & padding off from HTML and Body tag. 还从HTML和Body标签中删除了边距和填充。

EDIT HTML 编辑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 个解决方案

解决方案1
0 2017-07-24 15:26:49

移动设备上的全宽容器

问题描述

1 个解决方案

解决方案1 0 2017-07-24 15:26:49

解决方案1
0 2017-07-24 15:26:49