javascript - 针对 iPhone 响应式设计错误的 CSS 解决方法

Question

我为我们的社交俱乐部创建了一个新页面，但遇到了一些问题。这是一个采用单页设计的响应式网站。在介绍部分，只有一个带有简单徽标的背景图像。

现在一切在 android 和大多数 pc 浏览器上看起来都不错，但不知何故 iphone 浏览器显示背景图像缩放。

有人知道解决方法吗？

您可以在http://juku-tbg.de/上自己尝试一下

Chrome 屏幕截图：-> 确定

Chrome 上的 iPhone 模式：-> 确定

安卓设备截图：-> OK

iphone 5s 上的截图：-> NOK

非常感谢。

Answer 1

background-attachment: fixed在移动 Safari 中被窃听。对于修复，请使用单独的容器并position: fixed改为应用它。

#bg {
    background-image: url('path/to/img.jpg');
    background-attachment: scroll;
    background-position: center top;
    background-repeat: no-repeat;
    display: block;
    width: 100%;
    min-height: 100%;
    z-index: -100;
    position: fixed;
    top: 0;
    left: 0;
}