1 @media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : portrait) { 2 /*iPhone 6 Portrait*/ 3 } 4 5 @media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : landscape) { 6 /*iPhone 6 landscape*/ 7 } 8 9 @media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation : portrait) { 10 /*iPhone 6+ Portrait*/ 11 } 12 13 @media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation : landscape) { 14 /*iPhone 6+ landscape*/ 15 } 16 17 @media only screen and (max-device-width: 640px), only screen and (max-device-width: 667px), only screen and (max-width: 480px){ 18 /*iPhone 6 and iPhone 6+ portrait and landscape*/ 19 } 20 21 @media only screen and (max-device-width: 640px), only screen and (max-device-width: 667px), only screen and (max-width: 480px) and (orientation : portrait){ 22 /*iPhone 6 and iPhone 6+ portrait*/ 23 } 24 25 @media only screen and (max-device-width: 640px), only screen and (max-device-width: 667px), only screen and (max-width: 480px) and (orientation : landscape){ 26 /*iPhone 6 and iPhone 6+ landscape*/
@media screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2){ /* iphone5 */ /*苹果5判断多用于写rem为单位的自适应页面,当750设计图中字号为24px时,换算到苹果5上的显示字号只有10像素多,字号过小,需要单独设置为11px或者12px*/ }
@media screen and (device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2){ /* iphone4 */ /*苹果4手机判断多用于微信动画,如果不单独设置样式,大部分会显示不全,下面一部分页面被截取*/ }