css3 @media ipad/iphone4/iphone5/ipad mini/ipad Retina

本文详细解析了针对不同iPad和iPhone设备的媒体查询规则，包括屏幕尺寸、像素密度和方向等条件下的样式调整策略。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

}

/*ipad mini*/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio: 1){

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

}

/*ipad Retina*/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio: 2){

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

}

/*iphone5*/
@media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : landscape){

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

}

/*iphone4*/
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape){

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

}