iPhone4、iPhone5、iPhone6和iPhone6+的CSS3媒体查询

 1 @media only screen and (min-device- 375px) and (max-device- 667px) and (orientation : portrait) {
 2 /*iPhone 6 Portrait*/
 3 }
 4 
 5 @media only screen and (min-device- 375px) and (max-device- 667px) and (orientation : landscape) {
 6 /*iPhone 6 landscape*/
 7 }
 8 
 9 @media only screen and (min-device- 414px) and (max-device- 736px) and (orientation : portrait) {
10 /*iPhone 6+ Portrait*/
11 }
12 
13 @media only screen and (min-device- 414px) and (max-device- 736px) and (orientation : landscape) {
14 /*iPhone 6+ landscape*/
15 }
16 
17 @media only screen and (max-device- 640px), only screen and (max-device- 667px), only screen and (max- 480px){
18 /*iPhone 6 and iPhone 6+ portrait and landscape*/
19 }
20 
21 @media only screen and (max-device- 640px), only screen and (max-device- 667px), only screen and (max- 480px) and (orientation : portrait){
22 /*iPhone 6 and iPhone 6+ portrait*/
23 }
24 
25 @media only screen and (max-device- 640px), only screen and (max-device- 667px), only screen and (max- 480px) and (orientation : landscape){
26 /*iPhone 6 and iPhone 6+ landscape*/

@media screen and (device- 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2){
/* iphone5 */
/*苹果5判断多用于写rem为单位的自适应页面，当750设计图中字号为24px时，换算到苹果5上的显示字号只有10像素多，字号过小，需要单独设置为11px或者12px*/
}

@media screen and (device- 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2){
/* iphone4 */
/*苹果4手机判断多用于微信动画，如果不单独设置样式，大部分会显示不全，下面一部分页面被截取*/
}

@media (device-height:667px) and (-webkit-min-device-pixel-ratio:2){ 
    /* 兼容iphone6，iphone7，iphone8s */
}
@media (device-height:736px) and (-webkit-min-device-pixel-ratio:2){ 
　　/* 兼容iphone6 Plus,iphone7 Plus,iphone8 Plus */
}

@media only screen and (device- 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3){ 
　　/* 兼容iphoneX */
}