現在滿大街的APP，除了游戲，軟件圖形類的需要用原生開發好點。現在大多還是基於WEBAPP或者混合的hybrid app，大家都知道資訊類的小應用其實網頁就可以勝任，當然如果你要調用一些應設備，原生的APP外hybrid app也是一個不錯的選擇。不過我們今天的主角是WEB APP,WEB APP好處就是，隨時隨地有網就能看，簡單實用。對於開發來說，更是低成本高效率，當然對於追求細致的來說。。。就有點。。。。。好了，下面我們來看看WEB APP怎么區分iphone 4 5 6吧
在網頁中，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為是320*480，設備高度為480px
iPhone5的分辨率為640*1136 pixels，DPI依然是320*568，設備高度為568px
iPhone6的分辨率為750*1334 pixels，DPI依然是375*667，設備高度為667px
iPhone6 Plus的分辨率為1242x2208 pixels，DPI依然是414*736，設備高度為736px
那么我們只需要判斷iphone手機的device-height(設備高)或者device-width(設備寬)值即可區別iPhone4和iPhone5、iPhone6、iPhone6 Plus
使用css
通過 CSS3 的 Media Queries 特性，可以寫出兼容iPhone4和iPhone5、iPhone6、iPhone6 Plus的代碼~~
方式一，直接寫到樣式里面
@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:667px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone6 */
.class{}
}
@media (device-height:736px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone6 Plus */
.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" /> <link rel="stylesheet" media="(device-height: 667px)and (-webkit-min-device-pixel-ratio:2)" href="iphone6.css" /> <link rel="stylesheet" media="(device-height: 736px)and (-webkit-min-device-pixel-ratio:2)" href="iphone6p.css" />
使用JS
//通過高度來判斷是否是iPhone 4還是iPhone 5或iPhone 6、iPhone6 Plus
isPhone4inches = (window.screen.height==480);
isPhone5inches = (window.screen.height==568);
isPhone6inches = (window.screen.height==667);
isPhone6pinches = (window.screen.height==736);