背景图像在移动设备上被炸毁答案

【问题标题】：background image is blown up on mobile device背景图像在移动设备上被炸毁
【发布时间】：2016-02-04 23:23:07
【问题描述】：

我创建了一个视差页面。在我的桌面上一切都很好，但如果我在移动设备上查看它，图像被炸毁了，我可以从字面上计算像素。

我不知道是什么原因造成的。即便如此，我也不知道如何解决这个问题....

除了 Google，我什至不知道从哪里开始。我发现了一个主题，有人说这是一个 Safari 问题。

有人吗？

我无法真正创建 JSFiddle 之类的东西，因为正如您所说，它是用 WordPress 制作的。

但是，请参阅所附图片。也许有人至少可以看到问题出在哪里，也许可以告诉我是什么原因造成的（全局指示）
桌面：

手机 (iPhone)

【问题讨论】：

你需要给我们看一些代码。
你累了什么？你的代码在哪里？你能提供一个演示这个问题的演示吗？
你已经从 wordpress 发布了一堆 PHP，我不会设置 wordpress 服务器来尝试复制问题。您需要整理一个最小的测试用例并在 jbin 上发布，jsfiddle pr 类似。

【解决方案1】：

您可能想尝试将background-size:cover 交换为background-size:contain。这将确保背景图像在窗口内适合其宽度和高度，但可能会创建一些空白空间。使用“覆盖”，可以保证整个区域都被填充，但图像可能不会被完全包含，这似乎是现在正在发生的事情。

【讨论】：

【解决方案2】：

您是否尝试过添加：

<meta name="viewport" content="initial-scale=1.0">

到你的 HTML 的头部？或者，如果这还不够，请尝试：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

它告诉移动浏览器使用设备宽度并使用完整的初始缩放级别。

【讨论】：