Javascript iPhone移动web应用视网膜图像替换

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

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

这是我的问题。它有时能工作，但并不总是能找到视网膜图像来代替原来的图像。有什么想法吗

---

您可以通过iPhone查看位于的项目，了解我的意思

目前没有针对响应图像的明确解决方案。概述了我们的一些选择

---

无论您选择哪一种，请勿仅向iPhone提供2倍图像。首先，并不是所有的iPhone都有视网膜显示器。如果你想做一些能经得起未来考验的东西，你应该瞄准像素密度，而不是一款手机。在不久的将来，其他品牌和操作系统可能会有高DPI屏幕。最后，对你来说工作会更少。

我查看了你的应用程序，认为我看到了问题所在。假设没有显示的图像是名称中带有@2x后缀的图像，问题是它们返回404个错误。
由于htaccess中的某些内容，这些图像可能无法访问。 这些图像的路径可能是错误的 可能图像根本就不在那里

请检查一下，这可能会解决您的问题

重要尽管如此，我还是建议放弃使用javascript来查找视网膜图像，而是使用css路线。我喜欢javascript，但对于您正在尝试做的事情来说，这太过分了

每个带有css类的图像。标题都可以用代码绘制。我向你保证，这将使你的应用程序加载速度更快，作为一种奖励。这就是我用css替换它的方法。我试过了，它看起来完全一样，但不需要更换图像

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

---

希望这有帮助。若要避免此分辨率问题，请始终尝试在图像上使用代码（如果您没有发现此问题）。我唯一一次看到这是一个问题是，你们是否必须支持旧版本的IE，你们必须保留每一个图形元素。对于图像密集的网站，我通常避免优化要优化的图像。快速加载时间有时比高分辨率更重要

我发现这个网站用视网膜图像代替了非视网膜图像。可以在这里找到：

  @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*/
      }
  }