为什么我的 iphone 上的移动背景与 devtools 中的不同？答案

【问题标题】：Why is my mobile background different on my iphone than in devtools?为什么我的 iphone 上的移动背景与 devtools 中的不同？
【发布时间】：2020-12-30 05:40:13
【问题描述】：

所以我使用 Chrome 开发工具来检查 iphone 的响应能力，它看起来很好。但是当我在我的实际 iPhone 上查看该网站时，背景完全不同。这是我的代码的链接https://github.com/CurtisKil/manesseGrading_2

How it looks on Devtools

How it actually looks on iphone

【问题讨论】：

嗨@CurtisK。问题来自background-attachment: fixed;。请查看我的答案以了解如何解决此问题。

标签： css mobile responsive-design

【解决方案1】：

这里的问题是：

background-attachment: fixed; 在大多数浏览器上都不能正常工作，尤其是在 iOS 上不能正常工作。（在此处阅读有关原因的更多信息：How to replicate background-attachment fixed on iOS）

快速修复： 不要使用 iOS 的背景附件修复。

因此，将 style.css 中的代码更改为：

#home-section { background: url(../img/header-bg.jpg); background-repeat: no-repeat; background-size: cover; background-attachment: fixed; min-height: 800px; }

收件人：

#home-section { background: url(../img/header-bg.jpg); background-repeat: no-repeat; background-size: cover; min-height: 800px; }

替代解决方案： 寻找使background-attachment:fixed 适用于不同浏览器的变通方法。下面是一些可以帮助您入门的内容：

【讨论】：