iOS 移动设备拉伸背景图片答案

【问题标题】：iOS mobile devices stretching background imageiOS 移动设备拉伸背景图片
【发布时间】：2017-10-28 08:57:53
【问题描述】：

我在使用 iOS 设备时遇到了背景压力问题。仅当我将内容添加到页面like this. 时它才会拉伸它在空页面like this 上正确加载。我读到它与添加background-attachment:scroll 而不是background-size: cover 有关。将其添加到 css 时，我没有得到任何更改。我一定是使用了错误的内容 ID。在为移动主题制作更多图像之前，我想知道无论如何我可以用代码修复它吗？任何帮助将不胜感激。

【问题讨论】：

我应该把这段代码放在哪里？

标签： ios css image mobile background

【解决方案1】：

视差效果基于这样一种概念，即背景图像在拉伸以适合其容器时将保持在固定位置。不幸的是，单靠 CSS 不会让它发生。

一旦将元素设置为固定位置，它就会从 DOM 中移除并相对于窗口

section 
{   
    position: fixed;
    top: 0;
    bottom: -72px;
    background-image: url(http://bgImage);
    background-size: cover;
    background-attachment: fixed;
}

【讨论】：

非常感谢。我必须将部分更改为#primary 才能更改。我修复了一个问题，它通过取出顶部和底部填充的代码创建了位于标题上方的帖子。现在背景看起来很棒。再次感谢你。唯一的问题是页面上的内容被截断。我也无法滚动，因为它会切断播放器和页面上的社交图标。我需要添加到位置来修复它吗？
好的太好了！！ @BryanHoward 你可以试试这个位置：绝对；顶部：0；左：0；可能对你有帮助！！
绝对有帮助。它显示的内容更多，背景仍然正确，我现在可以滚动了。然而，它仍然会从顶部截断大约 80% 的屏幕。我是否也需要更改底部的填充？
是的，您可以更改底部的填充。我不明白你发生了什么，没有“底部”通过也检查它（删除部分中的底部，你也会检查）。
好的，让我澄清一下。背景还不错。在固定背景位置的同时，页面上的内容如何被截断。它不显示任何超过屏幕约 80% 的内容。绝对它显示更多内容，但它切断了大部分内容。在页脚中包括社交图标。

【解决方案2】：

尝试在您的 html 头标签中添加此代码：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">

【讨论】：

您好，抱歉回复晚了。我只是尝试将此添加到我的 html 中的 head 标签中，但不幸的是没有看到任何更改。
Np，很高兴你找到了答案！