摘要：

[iPhone 4帶來的革新，retina display絕對是最吸引眼球的一項。正是依賴這視網膜顯示屏，iPhone 4的解析度達到了640×960 pixels，不過為了保持向下相容性，它採用的仍然是320×480 points。也就是說，在不進行縮放的情況下，顯示普通圖片時，它會用4個畫素來顯示圖片中的1個畫素;而在顯示retina圖片時，每個畫素都對應圖片中的1個畫素。

如此一來，老的應用無需修改就可以在iPhone 4上運行了——雖然顯示效果差了點，但是不會出現只有左上角那1/4的區域有內容的情況。

在網頁中，pixel與point比值稱為device-pixel-ratio，普通裝置都是1，iPhone 4是2，有些Android機型是1.5。]

那麼-webkit-min-device-pixel-ratio:2可以用來區分iphone(4/4s/5)和其它的手機

iPhone4/4s的解析度為640*960 pixels，DPI為是326，裝置高度為480px

iPhone5的解析度為640*1136 pixels，DPI依然是326，裝置高度為568px

那麼我們只需要判斷iphone手機的device-height(裝置高)值即可區別iPhone4和iPhone5

使用css

通過 CSS3 的 Media Queries 特性，可以寫出相容iPhone4和iPhone5的程式碼~~

方式一，直接寫到樣式裡面

@media (device-height
 
:480px) and (-webkit-min-device-pixel-ratio:2){/* 相容iphone4/4s */
.class{}
}
@media (device-height:568px) and (-webkit-min-device-pixel-ratio:2){/* 相容iphone5 */
.class{}
}

方式二，連結到一個單獨的樣式表，把下面的程式碼放在標籤裡

<link rel="stylesheet" media="(device-height: 480px) and (-webkit-min-device-pixel-ratio:2)" href="iphone4.css"
 
 />
<link rel="stylesheet" media="(device-height: 568px)and (-webkit-min-device-pixel-ratio:2)" href="iphone5.css" />
使用JS

//通過高度來判斷是否是iPhone 4還是iPhone 5
isPhone4inches = (window.screen.height==480);
isPhone5inches = (window.screen.height==568);