我遇到了一个问题。当我在电脑和手机上查看我的网站时，它构建得非常完美；但是，当我在 iPad 上打开它时，背景图像就像被放大了一样。我的网站是http://www.zwdalpha.com/ ，任何帮助将不胜感激!另外，我的 Github 是 https://github.com/zcsmouse970/zwdalpha
最佳答案
要解决此问题，您首先需要了解发生了什么。背景图像大小由 background-size 属性处理，您当前已将该属性设置为 cover。 cover 非常适合大屏幕，因为它确保图像“覆盖”元素的高度。这允许在侧面进行裁剪以确保它从上到下填充。 contain 与之相反。它确保您始终可以看到整个图像。它通过确保宽度为 100% 并且高度留给裁剪或扩展来实现。当您在平板电脑和更小的设备上看到图像被“放大”时，CSS 正在确保整个内容区域都被图像填充，它通过确保图像的高度填充内容 Pane 来实现这一点。这是我们获得更多详细信息的地方。
您将图像设置为固定。显然这就是您想要的效果，但让我们考虑一下这里需要发生什么。现在图像需要从上到下覆盖屏幕，因为它可以在内容 Pane 的任何位置被查看，同时被固定。所以现在你的图像覆盖了整个视口(viewport)。将其更改为 background-attachment:scroll; 时，您可以看到它所做的更改。它反而使图像适合内容 Pane 而不是视口(viewport)。
综上所述，您可以通过实现媒体查询并将背景切换为更适合查看尺寸的裁剪版本来改变这一点。
关于css - 如何调整背景图像以适应 iPad 屏幕，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45492201/