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

Question

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

现在在 android 和大多数 pc 浏览器上一切看起来都不错，但是 iphone 浏览器以某种方式显示背景图像已缩放。

有人知道解决方法吗？

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

Chrome 屏幕截图:-> 确定

Chrome 上的 Iphone 模式:-> 确定

Android 设备的屏幕截图:-> 确定

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;
}