支持高密度視網膜顯示的5種方法

布倫丹·戴維斯（Brendan Davis）在我最近的文章“響應式網絡設計和滾動條：Chrome的實現更好？ 簡短的答案是：不 - 但是我們需要更深入地研究他們可能引起的問題。 什麼是視網膜？

“視網膜”是蘋果的雙密度屏幕的品牌名稱，但其他製造商正在創建類似的顯示器。該技術用於最近的iPhone，iPad，MacBook Pros和其他高端設備。 例如，MacBook Pro 15“的分辨率為2,880×1,800或220像素 /英寸。在這個規模上，大多數人無法在典型的觀看距離上註意到單個像素 - 應用程序和網站太小而無法使用。

因此，該設備恢復為1,440×900的標準分辨率，但是附加像素可用於使字體和圖形看起來更光滑。

有什麼問題？

>標準分辨率位圖圖像在視網膜顯示屏上看起來可能是塊狀的。 400 x 300的照片縮放到800 x 600像素，但沒有其他細節。與光滑字體和其他高分辨率圖像相比，這可能是顯而易見的。

>

現實世界的用法

>如果您環顧網絡，您會因為認為每個人都有視網膜顯示屏而被原諒。目前，它僅在高端設備中可用，但是這些設備被開發人員垂涎，因此導致了不成比例的在線討論。在現實世界中，使用類似顯示的人的百分比為低單人物。

>讓我們介紹一下：如果您不是為1％的IE6/7用戶開發，那麼您可能不應該太擔心使用Rentina的人 - 尤其是因為他們仍然可以查看您的網站。 也就是說，類似視網膜的屏幕最終將遷移到所有設備。現在幾乎沒有理由煩惱，但是某些前進計劃沒有任何傷害。讓我們以推薦順序查看選項……

>

1。使用SVG和CSS3效果

線索在名稱中，但可擴展的向量圖形是…

可伸縮！

> svg的大小無關緊要 - 它總是很平穩，因為它是使用向量（線條和形狀）而定義的，而是比單個像素。

對於照片，圖表和圖表的理想選擇，

> svg是不切實際的。主要缺點是IE8及以下缺乏支持，但您始終可以提供PNG後備或使用諸如Raphaël或svgweb之類的墊片。另請參閱：如何將可擴展的向量圖形添加到您的網頁。

>您也可以完全替換一些圖像。例如，可以單獨使用CSS3複製標題，漸變，角或陰影。它們的質量會更高，導致HTTP請求較少，並且使用較少的帶寬。

>

2。使用WebFonts圖標

我使用WebFonts圖標越多，我就越愛它們。像SVG一樣，字體是向量，因此它們是可擴展的，因此您可以使用包含圖標的字體集。它們非常適合經常使用的小型形狀，例如電子郵件信封，電話，小部件控件和社交媒體徽標。它們還可以在包括IE6在內的每個瀏覽器中工作。

有很多商業和免費圖標字體套件可用：

• > tymeson
• >字體真棒
• 標誌性
• 基礎

或您可以使用託管字體服務，例如我們喜歡圖標字體。

我建議使用Fontello或Icomoon等在線工具創建自己的小型自定義圖標。

>

3。當實用

時，請使用高分辨率圖像

視網膜的像素是標準屏幕的四倍。如果您有400 x 300映像（120,000像素），則需要使用800 x 600替代方案（480,000像素）在高密度顯示器上呈現良好。 但是，高分辨率文件大小不一定要大四倍。每個圖像都不同，但是如果它包含可省略的顏色或細節的堅實塊，則使用800 x 600圖像並將其擴展在瀏覽器中。

務實：如果標準圖像為200kb，高分辨率版本為250kb，則使用圖像替換技術可以忽略不計。在整個過程中都使用更好的版本。

4。使用CSS圖像替換

>有時會使圖像的高分辨率版本大四倍或更多。在這種情況下，您可能需要考慮圖像更換技術，即標準圖像被視網膜顯示屏上的較大替代方案所取代。可以使用以下媒體查詢代碼：

缺點：

#myimage {
	width: 400px;
	height: 300px;
	background: url(lo-res.jpg) 0 0 no-repeat;
}

@media
screen and (-webkit-min-device-pixel-ratio: 1.5),
screen and (-moz-min-device-pixel-ratio: 1.5),
screen and (min-device-pixel-ratio: 1.5) {
	#myimage {
		background-image: url(hi-res.jpg);
	}
}

>您需要創建和維護兩組圖像。

>

一些瀏覽器將下載這兩個圖像。

請記住，這些用戶中的許多將在較慢的移動網絡上使用智能手機或平板電腦。檢測連接速度比確定像素密度更有益。
2. 5。使用JavaScript圖像替換
可以使用以下代碼來實現

視網膜顯示檢測：>

一旦確定了視網膜顯示屏，您就可以：

1. 循環瀏覽所有頁面圖像並提取URL。
2. >將“@2x”附加到文件名，並嘗試使用AJAX加載結果圖像URL。
3. 如果找到，請用高分辨率替代品替換當前圖像。
>

幸運的是，艱苦的工作是在entinajs.com上為您完成的。雖然它僅增加4KB重量，但高密度顯示器將下載兩次圖像 - 儘管在加載頁面後，第二次將作為背景過程發生。

>

我的建議：要實用並保持簡單。不要花費大量時間來嘗試解決與用戶相稱的設備上的較小渲染問題。當然，當您的老闆收到他的新iPad並開始抱怨圖像質量時，這些都不重要……

>

>對本文的評論已關閉。有關於視網膜展示的疑問嗎？為什麼不在我們的論壇上詢問

>

以上是支持高密度視網膜顯示的5種方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！