网站背景图片在 IOS 台设备上看起来不同

Question

您好，我使用 html、css、js、sass（使用 gulp）制作了网站。我应该在笔记本版本和 Android 设备上一切正常，但在 IOS 网站上出现问题。主页上的介绍 div 有背景图像，在 Android 上看起来很酷，但在 IOS 设计（Iphone 6、7、8+）上它非常模糊和糟糕，有部分截图和代码。

.intro {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 100vh;
    -webkit-box-align: center;
      -ms-flex-align: center;
        align-items: center;
    background: url('../img/intro-background-4.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;  }

This is the Android

This is IOS

有人能解决这个问题吗

Answer 1

@supports (-webkit-touch-callout: none) {
  .intro {
    background-attachment: scroll;
  }
}

...应该修复它。

网站背景图片在 IOS 台设备上看起来不同

Website Background Image looking different on IOS devices

html

css

ios

responsive-design

responsive