我的网站主体的背景图片在桌面上响应，但在实际手机上不响应答案

【问题标题】：The background image of my website body is responsive on desktop but not on an actual phone我的网站主体的背景图片在桌面上响应，但在实际手机上不响应
【发布时间】：2020-02-06 00:47:08
【问题描述】：

我制作了一个部署在 heroku 上的响应式网站。当我使用 chrome 设备工具栏模拟手机视口时，背景图像是可缩放的。但在实际手机上却不是。我只是得到一个只占据屏幕一部分的静态缩小图像。除了图像之外，其他一切都在响应式地工作。

这是我的背景图片的 CSS：

body {
  background-image: url('assets/backgroundimage2.jpg');
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}

【问题讨论】：

Responsive web design is working on desktop but not on mobile device的可能重复
当你说背景图片是“响应式”时，你是什么意思？
@HereticMonkey 抱歉，我的意思是背景图像会根据窗口大小调整/裁剪，但单个图像仍会覆盖整个视口。
@EternalHour 我有元标记，除了图片，网站正常工作。
@HereticMonkey Scalable image 是我认为的正确术语。

标签： css responsive-design

【解决方案1】：

max-width: 100% 可能是您解决问题的方法。这会告诉您的浏览器图像不应大于移动屏幕。

【讨论】：

不是和background-size: cover;的效果一样吗？
你可以尝试使用 max-width ，也许它会解决你的问题。我不确定是否有相同的；
没有骰子。奇怪的是，移动Firefox上的背景图像很好。但是 chrome mobile 强制将完整图像显示在视图中，因此仅使用部分视口。

【解决方案2】：

在这里找到我的答案： background-size: cover not working in portrait on Android tablet

由于某种原因，我们必须将 html 和 body 标签的高度和最小高度指定为 100%。

【讨论】：