适配ios设备集锦

阅读更多

 

   本文收录一下关于ios适配的media query规则

 

• iPad：

@media only screen
and (min-device-width:768px)
and (max-device-width:1024px) {
   //....
}

 

• iPad横屏：

@media only screen
and (min-device-width:768px)
and (max-device-width:1024px) 
and (orientation: landscape) {
   //....
}

 

 

 

• iPad竖屏：

@media only screen
and (min-device-width:768px)
and (max-device-width:1024px)
and (orientation:portrait) {
   //......
}

 

    iPad3和 ipad4 都有Retina

 

 

• Retina iPad

@media only screen
and (min-device-width:768px)
and (max-device-width:1024px)
and (-webkit-min-device-pixel-ratio:2) {
    //....
}

 

 

•    iPad1和iPad2

@media only screen
and (min-device-width:768px)
and (max-device-width:1024px)
and (-webkit-min-device-pixel-ratio:1) {
   //...
}

 

 

• iPhone 2G- 4S

@media only screen
and (min-device-width:320px)
and (max-device-width:480px) {
    //....
}

 

 

• iPhone5

@media only screen
and (min-device-width:320px)
and (max-device-width:568px) {
    //....
}

 

 

   iPad mini 也是和 iPad 1 和 2 一样