CSS Media Queries for iPads & iPhones

iPad Media Queries
iPad in portrait & landscape
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* STYLES GO HERE */
}

iPad in landscape
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* STYLES GO HERE */
}

iPad in portrait

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

iPad 3 & 4 Media Queries

Retina iPad in portrait & landscape

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

Retina iPad in landscape

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio: 2) {
/* STYLES GO HERE */
}
Retina iPad in portrait

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

iPad 1 & 2 Media Queries

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

iPad 1 & 2 in landscape

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

iPad 1 & 2 in portrait

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