移动设备上背景图像大小错误/不一致
我正在做一个小网站，因为我快完成了，所以我想在网上看到它……一切都很好，从我的笔记本电脑，在所有的屏幕上，网站都运行得很好，背景图像的大小/位置也很合适。我太高兴了，但当我从手机上打开它时，我得到了一个惊喜:背景图像看起来与我在笔记本电脑上执行的模拟完全不同。
我已经尝试添加下面的代码，但它没有改变任何东西。CSS：.main-cont{background:线性梯度( rgba(0，0，0，0.3)，rgba(0，0，0，0.0) )，url("../images/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/
On mobile ( wrong ) On desktop ( correct )
类别部分：
回答 1
Stack Overflow用户
发布于 2021-08-02 22:10:59
感谢你的链接和截图，这很有帮助。
我认为问题出在您的手机上不支持div.main-cont HTML元素上的background-attachment。在您的浏览器中，如果您打开检查器并禁用(取消选中)显示为background-attachment: fixed;的CSS，您将看到您在手机上看到的内容。
如果你看看caniuse.com上对background-attachment的浏览器支持，总体上只有82%，而且在Safari上根本不支持。当CSS不起作用时，背景图片不会根据屏幕的大小调整大小，而是根据它所在的div调整大小，就像页面的高度一样。这就是图像看起来放大/巨大的原因。
如果您想保留background-attachment: fixed行，我建议将background-position更改为top，并添加新行background-size: auto 100vh以控制大小。它不会在Safari上滚动，但看起来会更正常。
如果你仍然想让这个背景图片与你一起滚动，你可能不得不改变策略，添加一个带有背景的带有position: fixed的超文本标记语言元素。修复了图片或内容可能会变得混乱的fyi。
https://stackoverflow.com/questions/68628083
复制相似问题
腾讯云开发者
