2010-09-06 147 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