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移動網絡應用程序視網膜圖像替換

回答

相關問題