，如何處理圖像？ JS腳本自動加載正確的大小？

Question

因此，現在新的iPad是在市場上處理您的網站圖像的最佳做法是什麼？

是否有任何腳本根據屏幕分辨率自動選擇版本x1或x2？

Answer 1

您可以通過幾種不同的方式來做到這一點 - 無論是在CSS中直接使用不同的媒體查詢，還是使用JavaScript，使用window.devicePixelRatio屬性。

這篇文章有如何去做一個很好的解釋：

http://mikepultz.com/2012/03/how-to-make-images-look-good-on-the-ipad-3/

Answer 2

幾天前我剛剛在考慮這個問題 - 您可能對自適應路線感興趣。看看這個http://adaptive-images.com/相當簡單的實施。它會告訴你如何根據顯示來改變它 - 注意，這意味着你將不得不儲存更高分辨率的圖像，這些設備可能沒有最好的互聯網連接。

Answer 3

我使用媒體查詢。這是最簡單的方法。下面是我使用的代碼：

@media only screen and (-webkit-min-device-pixel-ratio: 2) { 
    .your-class-name { 
     background: url("images/your-image@2x.png"); 
     background-size: 18px 18px; 
    } 
} 

記住：

•您的分機

•使用相同的背景大小「作爲您的非Retina圖像前添加「@ 2X」

•視網膜圖像的大小作爲非視網膜

精通兩次：

非視網膜= 100像素X 100像素

視網膜= 200像素X 200像素