iPhone and iPad media queries

media.css

/* iPhone */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) {  /* iPhone 5 in portrait & landscape */
}

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

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


@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) { /* iPhone 2G-4S in portrait & landscape */
}

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) 
and (orientation : landscape) { /* iPhone 2G-4S in landscape */
}

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) 
and (orientation : portrait) { /* iPhone 2G-4S in portrait */ 
}

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

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

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

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 1)  { /* iPad mini in portrait & landscape */
}

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

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