0

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

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

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

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

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

4

2 回答 2

1

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

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

重要的是，尽管如此，我建议放弃使用 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 并且你必须保留每个图形元素时，我才认为这是一个问题。对于图像重的网站，我通常会避免将图像优化为视网膜优化。快速加载时间有时比高分辨率更重要。

于 2012-09-01T13:35:10.960 回答
0

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

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

于 2012-09-01T13:07:12.383 回答