2010-09-06 150 views

回答

5

我不认为@2x技巧适用于网页内容。听起来真的很有用,但我肯定会向苹果提出一个错误要求。

如果您从您的应用程序生成上述HTML,那么我认为现在最好的方法是检测您是否在Retina显示设备上运行,然后手动调整图像名称。

你可以做这样的事情检测Retina显示屏:

if ([[UIScreen mainScreen] respondsToSelector:@selector(scale)]) { 
    if ([[UIScreen mainScreen] scale] == 2) { 
     // Use high resolution images 
    } 
} 

(接过代码从一个答案,我发现这里的SO)

+0

谢谢。我不是从应用程序生成HTML,但我可能有2个不同的pathForResource文件,并基于上述测试使用适当的。我会试一试。 – 2010-09-06 17:33:37

+0

如果没有(非标准的)META标签或类似标签,就不太可能发生这种情况 - 将您要访问服务器的请求数量翻倍以获得更漂亮的图像并不是一个好主意,尤其是在大多数网站(例如桌面无论如何都会以1/2或1/3的比例渲染。 – 2010-09-06 19:12:30

+0

尚未完成,但这是我正在采取的方法。我可能不知道“如果您从您的应用程序生成... HTML”是什么意思,因此我可能误导了tc。 HTML驻留在我的包中。它是固定的;用于应用程序在UIWebview中显示格式化文本。没有涉及服务器。我没有即时生成HTML,因此我无法替换不同的图像名称和尺寸,但很容易就可以得到具有iPhone4高分辨率图像参考和尺寸的第二个HTML文件,并使用上面的建议代码决定使用哪个pathForResource。 – 2010-09-07 01:06:55

2

目前做到这一点的最好办法是通过参考您的图片在您的CSS文件中使用background-image属性。然后,您可以使用仅由具有高分辨率屏幕的设备加载的特殊CSS文件来覆盖这些属性。

有关更多信息,请参阅this blog post

14

这样做的方式是使用CSS背景。只需在CSS中将所有2X内容嵌入到小节中即可。关键还在于设置-webkit-background-size。下面是一个css(包括视网膜和非视频)部分的例子,其中id为Ampersand,用作图像。

div#Ampersand { 
    background: url('AmpersandBurned.png'); 
    width:43px; 
    height:97px; 
    float:left; 
    -webkit-background-size: 43px 97px; 
} 

@media screen and (-webkit-device-pixel-ratio: 2) { 
    div#Ampersand { 
    background: url('[email protected]'); 
    width:43px; 
    height:97px; 
    float:left; 
    } 
} 
+1

你救了我男人!我无法找到在CSS中显示视网膜图像的实际解决方案 – Volatil3 2012-08-03 07:50:57