CSS 全屏背景在开发工具中有效，但在真实浏览器中无效答案

【问题标题】：CSS Fullscreen background does work in Dev-tools but not in real browserCSS 全屏背景在开发工具中有效，但在真实浏览器中无效
【发布时间】：2017-05-24 21:47:14
【问题描述】：

我已经建立了一个 Meteor 应用程序/网站，我正在尝试在此页面顶部 (https://www.conducate.com) 放置一个响应式全屏背景图像。

它在 Chrome 开发者工具和 Safari 响应式设计模式下都能正常工作，但是当我部署页面并在我的手机上查看它时，它似乎放大了图像的顶部，并且确实没有按照开发工具的预期调整它的大小。结果，只能看到灰色模糊。

你们中有人遇到过这个问题吗？很难调试，因为它在所有开发人员工具中都能正常工作，但在移动设备上实际查看时却完全无法调试。

下面是一个带有屏幕截图的图像的链接，一个来自我的手机（iPhone 6s，safari 浏览器），另一个来自我的 mac 上的 safari 响应式设计模式。不幸的是，由于缺乏声誉，我无法发布图片，所以我可以发布链接 - 我还是个新手...

https://s3.eu-central-1.amazonaws.com/conducate-images/stackoverflow/example_screenshots.png

非常感谢任何帮助！

【问题讨论】：

你用的是什么手机？
我使用的是 iPhone 6s，但该手机上的 chrome 和 safari 存在问题
你认为你可以创建一个minimal reproducible example 来证明这个问题吗？
我的问题是我不知道是哪个组件导致了这个问题。所以我认为发布该网站的链接会有所帮助，因为我无法在不部署某些东西的情况下复制该问题，因为该问题并未显示在开发人员工具中
Android 上没有特殊问题。至少发个截图。如果您受到声誉特权的限制，请删除您的 URL，或者去获得一些声誉。

标签： html css responsive-design fullscreen

【解决方案1】：

在搜索了一些 iOS 特定问题后，我通过查看其他一些示例终于找到了问题的解决方案。

事实证明，大多数浏览器都理解 css 行

.container{
   background: url(http://www.link-to-image.jpg)
   ...
}

iOS 不是这种情况，这里你需要特别说明它是一个图像，用于背景。

.container{
 background-image: url(http://www.link-to-image.jpg)
 ...
}

【讨论】：