>伙计们！ 我有一个包含以下代码的网站：
<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>
所以问题是，如果我在移动设备上打开网站，它在屏幕右侧有一个空白区域。这是它的图片： 右侧空白区域
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; }
}
如何解决这个问题？谢谢！
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 单元，用于设置相对于视口的宽度。我希望这有所帮助。
还从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>