UIWebView和iPhone 4視網膜顯示屏

Question

我有一個UIWebView顯示一些本地文本和圖像。要麼我在某個地方犯了錯誤，要麼UIWebView不會自動處理@2x後綴以獲得高分辨率圖像。

所以，我的問題是有沒有人通過正常的方式成功地將@2x圖像加載到UIWebView，還是我需要做一些特殊的事情？我能否以某種方式檢測我的用戶是否有視網膜顯示器？

Answer 1

根據您的要求...

功能測試。如果您想知道是否需要顯示視網膜圖像或常規圖像，請測試您的設備是否具有視網膜顯示屏，而不是特定型號（未來儘可能驗證您的應用程序，這意味着您必須更改當一個新的模型出來時，這些東西就少了）。要做到這一點，你可以使用下面的示例代碼：

if([[UIScreen mainScreen] respondsToSelector:@selector(scale)] && 
    [[UIScreen mainScreen] scale] == 2.0) 
{ 
    /* We have a retina display. */ 
} 
else 
{ 
    /* We do not. */ 
} 

這段代碼是安全的，因爲我寫這一點，在所有型號上的所有固件版本的時間。在未來的版本中它將是安全的，直到Apple棄用scale方法，這種方法可能永遠不會發生。

更多關於你的問題，我不知道如何在webview中做到這一點，事先沒有位置視網膜圖像和非視網膜圖像。一旦我有了這些信息，我就可以使用它來替換一些已知的哨兵文本，這些文本是網頁期望我替換的，例如我會在HTML中添加一些內容：{{{image_location}}}，我可以在其中下載HTML數據，將其轉換爲字符串格式，然後替換該字符串替換該文本，如果我們在視網膜顯示器上，則使用@ 2x圖像的URL，使用適當的比例因子，如果不是，則使用正常大小的圖像（使用上面的代碼）。

希望這有助於如果沒有人提供更好的解決方案。

Answer 2

至於檢測，你可以使用this code sample。我剛更新它也檢測iPhone 4.

Answer 3

就始終做到：

<img src="image@2x.png" width={half-width} /> 

對CSS的引用背景圖像，使用-webkit-背景大小的一半大小的他們。

缺點：非視網膜設備將下載超大圖像。

Answer 4

我認爲這也可以通過使用一些CSS或Javascript魔術來僅顯示適當的圖片來實現。其主要思想是插入兩張圖片，正常和高分辨率，然後設置CSS屬性顯示到沒有的圖片面膜：

HTML文件

<link href="default.css" rel="stylesheet" media="screen" type="text/css" /> 
<link href="highresolution.css" media="screen and (-webkit-min-device-pixel-ratio:2)" type="text/css" rel="stylesheet" /> 

。 ...

<img src="image.png" width="..." height="..." class="normalRes" />  
<img src="image@2x.png" width="..." height="..." class="highRes" /> 

CSS file：default。CSS

.normalRes { display:block } /* or anything else */ 
.highRes { display:none } 

CSS文件：highresolution.css

.normalRes { display:none } 
.highRes { display:block } /* or anything else */ 

我已經測試它一點點，效果不錯。現在需要更多的測試。 我發現這裏的解決方案：http://www.mobilexweb.com/blog/iphone4-ios4-detection-safari-viewport

UPDATE 2012-06-24

這裏是不需要highresolution.css文件中的另一個解決方案。
將以下代碼添加到default.css。

@media all and (-webkit-min-device-pixel-ratio: 2) { 

    .normalRes { display:none } 
    .highRes { display:block } 

    ... 

Answer 5

最好的解決方案是將高分辨率圖像用於基於視網膜和非視網膜的WebViews。然後使用width和height屬性設置圖像的大小（以點爲單位）。

<img src="hi-res-icon.png" width="10px" height="10px" /> 

Answer 6

我使用此JavaScript hack在視網膜設備上運行時加載縮放圖像。它將更改所有圖像上的src和width屬性以使用相應的縮放圖像。請注意，我只用本地圖像進行了測試。

設置display: none然後在圖像加載接縫上重置它以修復一些閃爍。另請注意，此代碼可能與WebKit以外的其他瀏覽器不兼容。

document.addEventListener("DOMContentLoaded", function() { 
    var scale = window.devicePixelRatio; 
    // might want this to be scale != 2 
    if (scale == undefined || scale == 1) { 
    return; 
    } 

    var re = /^(.*)(\..*)$/; 
    var images = document.getElementsByTagName("img"); 
    for (var i = 0; i < images.length; i++) { 
    var img = images[i]; 
    var groups = re.exec(img.src); 
    if (groups == null) { 
     continue; 
    } 

    img.style.setProperty("display", "none"); 
    img.addEventListener("load", function(event) { 
     event.target.width /= scale; 
     event.target.style.setProperty("display", ""); 
    }); 
    img.src = groups[1] + "@" + scale + "x" + groups[2]; 
    } 
}); 

提示是將其添加到名爲例如scaledimages.js然後用

<script type="text/javascript" src="scaledimages.js"></script> 

確保JS文件在「複製包資源」列出，並在你的目標不是在「編譯源」，「構建階段」。默認的Xcode接口將Javascript文件檢測爲它喜歡編譯的東西。還要注意，如果將來devicePixelRatio碰巧等於或大於3，當前腳本可能會破壞事件，但現在可能需要將(scale == undefined || scale == 1)更改爲scale != 2，現在只需加載@2x。

更新：還有一個jQuery-Retina-Display-Plugin，做類似的事情，但需要您設置width屬性和接縫處還使用了HEAD要求，看是否像存在，不知道如何將本地文件的工作。