在网页中，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(设备高)值即可区别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:3){/* 兼容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" />
<link rel="stylesheet" media="min- 767px" href="pc.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);
其他兼容
//竖屏时使用的样式 <style media="all and (orientation:portrait)" type="text/css">#landscape { display: none; }</style>//横屏时使用的样式 <style media="all and (orientation:landscape)" type="text/css">#portrait { display: none; }</style> 附：获取屏幕宽高（分辨率）的代码
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <meta name="viewport" 6 content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height"> 7 <title>获取屏幕分辨率</title> 8 </head> 9 <body> 10 <script> 11 alert('屏幕宽度为：'+screen.width 12 +'，高度为：'+screen.height 13 ); 14 </script> 15 </body> 16 </html>
| 序号 | 品牌 | 宽度 | 高度 | 备注 |
| 1 | iphone7 | 375 | 603 | me |
| 2 | 索尼D6653 | 360 | 519 | bo |
| 3 | 魅族 | 360 | 567 | awei |
| 4 | 乐视max | 480 | 782 | huan |
获取设备宽高的方法：
<script>alert("屏幕宽度:"+$(window).width()+" "+"屏幕高度:"+$(window).height());</script>
/* 宽度值依据上表获取 */
@media (device-480px){
.class{}
}