2012年8月份剛開始接觸前端移動開發，現在主要是android和ios系統的手機，一套代碼需要同時兼容android和ios，就android而言已經有N個型號的手機，如果css代碼在這些手機上解析有稍微差別或者出現bug，那么，做兼容是必不可少，事實上隨着手機版本的不斷更新，產生一些不同的體驗，這也可以理解為制造了bug~
半年多了，遇到了不少問題，解決問題的過程即辛苦又很開心，辛苦是因為剛接觸，很多知識都不懂，需要花費很多的時間去摸索遇到的困難，開心呢當然是接觸到新鮮的手機開發，感到比較興奮，學習了不少知識。好了，不多說，開始本次的主題，今天主要對iphone手機的兼容方法做總結。
摘要：
[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{} } /* 上面的寫法合並后 */ @media (device-height:480px) and (-webkit-min-device-pixel-ratio:2),(device-height:568px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone4/4s5/5 */ .class{} }
方式二，鏈接到一個單獨的樣式表，把下面的代碼放在<head>標簽里
<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);
移動開發發展飛猛，各種新的設備也不斷的出現，我們在向后兼容的同時，也需要不斷術向前學習，趕上時代步伐~
參考資料：
iPhone 5 and iOS 6 for HTML5 developers, a big step forward: web inspector, new APIs and more