Question

我正在创建一个可通过任何智能手机访问的网络应用。我在这里有index.html文件：

http://www.mediafire.com/view/?hy2jttea705ukpw

我有2个jQuery函数。一种方法是检测用户是否通过iPhone查看Web应用程序并提出一个小气泡，详细说明将其添加到主屏幕。接下来是一个脚本，用我的根文件夹中的视网膜图像替换图像，名称中带有“@ 2x”。

这是我的问题。它适用于SOMETIMES，它并不总能找到视网膜图像来取代原始图像。有什么想法吗？

您可以通过iPhone在www.iammarksummerton.co.uk查看项目，看看我的意思

Answer 1

我在那里看了你的应用程序，并认为我看到了问题。假设未显示的图像是名称后缀为@ 2x的图像，问题是它们返回404错误。
由于htaccess中的某些东西，它的图像可能是不可能的。可能通往这些图像的路径是错误的可能图像根本不存在

对此进行检查，这可能会解决您的问题

重要但是，我建议放弃使用javascript来寻找这个视网膜图像，而是使用css路线。我喜欢javascript，但它对你要做的事情有点过分。

每个具有css类.heading的图像都可以用代码绘制。我向您保证，它会让您的应用加载速度更快。这就是用css替换id的方式。我尝试了它，它看起来完全一样，但不需要替换图像。

 **The html would be something like for each of those heading divs**
 <p class="heading">Can I access your social media?</p>

 **The css would be like**

 .heading {
      min-height: 53px;
      border: solid 2px #FD8B25;
      border-radius: 5px;
      line-height: 53px;
      text-transform: uppercase;
       font-weight: 600;
      font-size: 13px;
      padding: 0 12px;}

  .heading:after {
      content: '▼';/*You can replace '▼' with url(path/to/image) if needed */
      float: right;
  }

这不会取代图像，但会以其代码为基础看起来非常锐利。如果您仍希望通过css将图像更改为更清晰的图像，从而避免javascript的较慢开销。使用这个......

  @media only screen and (-webkit-min-device-pixel-ratio: 2) {
      .myCSSClass {
           background:url('path/to/image');
           /*in the case of an image tag, add lots of padding margin so that original image is not visible*/
      }
  }

希望这会有所帮助。为避免此解决问题，如果您发现此问题没有问题，请始终尝试使用代码而不是图像。只有当我看到这是一个问题时，如果你必须支持旧版本的IE，你必须保留每个图形元素。对于图像重的网站，我通常避免优化图像进行视网膜优化。快速加载时间有时比高分辨率更重要。

Answer 2

此时没有针对响应式图像的明确解决方案。 Chris Coyier概述了我们的一些选择。

无论您选择哪种不仅向iPhone提供2x图像。首先，并非所有的iPhone都有视网膜显示器 - 如果您正在尝试构建一些具有前瞻性的东西，那么您需要定位像素密度，而不是手机的一种型号。其他品牌和操作系统可能在不久的将来拥有高DPI屏幕。最终，你的工作将会减少。

iPhone移动网络应用程序视网膜图像替换

2 个答案: