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

我正在创建一个可通过任何智能手机访问的网络应用程序。我这里有index.html文件：iPhone移动网络应用程序视网膜图像替换

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

我有这2种jQuery的功能。一种是检测用户是否通过iPhone浏览网络应用程序，并提供一个小泡泡，详细说明将其添加到主屏幕的说明。接下来是一个脚本，用名称中的“@ 2x”替换具有根文件夹中视网膜图像的图像。

这是我的问题。它适用于有时，它并不总是找到视网膜图像来取代原来的。有任何想法吗？

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

来源

2012-09-01 user1636415

我发现这个网站取代了视网膜图像的非视网膜图像。它可以在这里找到：http://retinajs.com/ – user1636415

没有为响应图像在这个时候没有明确的解决方案。 Chris Coyier概述了我们的一些选项。

无论你选择哪一个都不要只能将2张图片发送给iPhone。首先，并非所有的iPhone都具有视网膜显示器 - 其次，如果您尝试构建一些有前瞻性的产品，则您需要定位像素密度，而不是一款手机的型号。其他品牌和操作系统在不久的将来可能会有高DPI屏幕。最后它会减少你的工作。

来源

2012-09-01 13:07:12 bookcasey

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

请检查是什么，以及可能解决您的问题

重要有了然而这一说，我倒是建议放弃使用JavaScript来寻找这个视网膜图像，而不是使用CSS路线。我喜欢javascript，但它对你正在尝试做的事情有点矫枉过正。

每个带有css class .heading的图像都可以用代码绘制。我向你保证，它会让你的应用程序加载速度更快。这是如何用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-01 13:35:10

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

回答

相关问题