我正在做一个小网站，因为我几乎完成了它，我想在网上看到它…一切都很顺利，从我的笔记本电脑上看，网站在所有屏幕上都运行得很好，背景图像的大小/位置也很合适。我太高兴了，但是当我从手机上打开它时，我得到了一个惊喜:背景图像看起来与我的笔记本电脑上的模拟完全不同。
我已经尝试添加以下代码，但它没有改变任何东西。CSS:.main-cont{背景:线性渐变(Rgba (0,0,0,0.3)，Rgba (0,0,0,0.0)(,url(". ./图片/home-background.jpg")}}");
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
min-height:100%;
background-size:cover;
}
@media (max-width: 768px) {
.main-cont {
background-attachment: scroll!important;
height:100vh!important;
}
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
{{ flask_util_js.js }}
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous">
</script>
<link rel="stylesheet" href="{{ url_for('static', filename='/CSS/style.css') }}">
<title>Title</title>
</head>
<body >
<div class='main-cont' >
# Nav and main content
</body>
</html>
我真的很感谢你的帮助，我完全卡住了!链接:http://alessio98.pythonanywhere.com/home/
手机版(错误)在桌面上(正确)
类别部分:
移动模拟器移动
感谢链接和截图，帮助很大。
我认为问题是background-attachment上的div.main-contHTML元素在您的手机上不受支持。在你的浏览器中，如果你打开检查器并禁用(取消选中)说background-attachment: fixed;的CSS，你会得到你在手机上看到的。
如果你看一下caniuse.com上对background-attachment的浏览器支持，它只有82%，Safari上根本不支持。当CSS不起作用时，背景图像不是为你的屏幕调整大小，而是为它所在的div调整大小，就像页面的高度一样。这就是为什么图片看起来放大了。
如果你想保留background-attachment: fixed行，我建议将background-position更改为top，并添加新行background-size: auto 100vh以保持大小。它在Safari上不能滚动，但看起来更正常。
如果你仍然想要这个背景图像与你一起滚动，你可能不得不改变策略，并添加一个具有背景的HTML元素position: fixed。固定的图像或内容可能会变得混乱。