视差图像模糊/V。 iphone上的像素化。需要 CSS 提示答案

【问题标题】：Parallax images blurred/V. pixelled on iphone. Need CSS hint视差图像模糊/V。 iphone上的像素化。需要 CSS 提示
【发布时间】：2014-09-20 21:18:51
【问题描述】：

我正在开发一个网站，但遇到了问题。

iPhone 屏幕上的背景图像看起来确实像素化了。

这是我正在使用的 HTML

<div class="parallax img-overlay3" style="background-image:url(img/pictures/food02.jpg)" data-stellar-background-ratio="0.2">

当我使用http://mobiletest.me/iphone_5_emulator 之类的东西时，它看起来很完美，但实际上在 iphone 中查看时，图像似乎被放大到我放入其中的任何图像的一小部分。谷歌了几个小时，似乎是一个没有明确答案的问题。

【问题讨论】：

您想在 iPhone 上需要这些超高分辨率图像吗？我的意思是 iphone 带有视网膜，这意味着你不仅有 72 ppi，而且超过 300ppi。您的图像需要适合该分辨率。
我更多地问为什么在模拟器中它可以工作，但在实际手机上却没有。我是否需要在服务器上放置 2 种不同类型的照片，以便根据访问它的设备来查看其中任何一张照片？这似乎违背了拥有响应式网站的意义。我已经看到这个问题在其他响应式网站上不存在......只有这个。 :(
响应式并不意味着您不必为创建图像而付出努力。例如，BBC 有一个流程可以为不同大小的网站创建 9 张不同的图片，并根据分辨率/dpi 加载这些图片。

标签： html ios css iphone stellar.js

【解决方案1】：

您需要记住，有些设备能够显示分辨率高于 72ppi 的图像。例如，新的 iPhone 6 plus 有 401ppi。您需要为这些设备提供额外的图像。为此，请使用带有 Device-pixel-ratio 的媒体查询： 2。这就足够了。也有 JavaScript 解决方案，但我认为您可以使用 Google 找到它们。

查看更多 CSS sn-ps： http://stephen.io/mediaqueries/

【讨论】：

【解决方案2】：

我遇到了同样的问题 (figure8recording.com)，但我认为它一定与视网膜图像有关，当我移除固定背景附件..

我认为任何带有“背景位置：固定”的图像都会将图像放大到整个文档正文的大小，当我在移动设备上设置“背景位置：滚动”时，图像看起来不错并且定位正确。

【讨论】：