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

【问题标题】：iPhone mobile web app retina image replacementiPhone 移动网络应用程序视网膜图像替换
【发布时间】：2012-08-27 00:24:30
【问题描述】：

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

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

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

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

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

【问题讨论】：

我找到了这个网站来替换视网膜图像的非视网膜图像。可以在这里找到：retinajs.com

标签： javascript iphone css web-applications

【解决方案1】：

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

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

IMPORTANT 话虽如此，但我建议放弃使用 javascript 来查找此视网膜图像，而是使用 css 路由。我喜欢 javascript，但它对于你想要做的事情来说太过分了。

每个带有 css 类 .heading 的图像都可以用代码绘制。我向您保证，它会让您的应用程序加载速度更快作为奖励。这就是 id 用 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;
  }

这不会替换图像，但由于基于代码，它看起来会非常清晰。如果您仍想通过 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 并且你必须保留每个图形元素时，我才认为这是一个问题。对于图像重的网站，我通常会避免将图像优化为视网膜优化。快速加载时间有时比高分辨率更重要。

【讨论】：

【解决方案2】：

目前对于响应式图片没有明确的解决方案。 Chris Coyier 概述了我们的一些选项。

无论您选择哪个不要仅向 iPhone 提供 2x 图像。一方面，并非所有 iPhone 都有视网膜显示屏——其次，如果你想构建一些面向未来的东西，你会希望以像素密度为目标，而不是手机型号。其他品牌和操作系统在不久的将来可能会有高 DPI 屏幕。最终它对你的工作会更少。

【讨论】：