在高密度显示器上设置响应式封面图像

Question

我有一个严重的问题。我还没有找到解决方案，所以我希望你知道。

我正在做网站。我需要制作响应式封面背景图像。（覆盖整个页面）。我从：

/* Location of the image */
  background-image: url(main.jpg);
  /* Background image is centered vertically and horizontally at all times */
  background-position: center center;
  /* Background image doesn't tile */
  background-repeat: no-repeat;
  /* Background image is fixed in the viewport so that it doesn't move when 
     the content's height is greater than the image's height */
  background-attachment: fixed;
  /* This is what makes the background image rescale based
     on the container's size */
  background-size: cover;
  /* Set a background color that will be displayed
     while the background image is loading */
  background-color: #464646;

这段代码只是有效的，即使我调整窗口大小等等。所以它非常好。但问题出现在高度分辨率的屏幕上，如iPad或iPhone。在那里，图像非常非常缩放，有点像素化或未聚焦。我想，这是因为图像分辨率低，但比我意识到的，图像接近5K。我想让它像在这个网站上一样响应

有什么帮助是好的，需要快速解决！

谢谢

Answer 1

您可以在 CSS 中创建媒体查询，以手动配置视网膜显示器（或其他高分辨率屏幕）上的背景图像。

请参阅 CSS 技巧。

媒体查询视网膜显示：

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { ... }

还有更多证明：

@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) { ... }

---

问题：

• 什么是媒体查询？
• 什么是新闻部？
• 什么是设备像素比？

---

另请参阅此帖子以获取相同的问题/答案。

Answer 2

这是因为您使用的是 background-attachment：fixed - 无论出于何种原因，当与 iOS 上的 background-size： cover 一起使用时会导致此行为。因此，如果您添加以下内容，则应解决：

/* for background-size:cover replacement on iOS devices */
@media only screen and (orientation: portrait) and (device-width: 320px), (device-width: 768px) {
    header {
      -webkit-background-size: auto 150%;
      background-attachment: scroll;
    }
}
@media only screen and (orientation: landscape) and (device-width: 320px), (device-width: 768px) {
    header {
      -webkit-background-size: 150% auto;
      background-attachment: scroll;
    }
}

解决方案从这里开始。