Pure CSS Code to detect any version of iPad both portrait and landscape

Question

I have code that helps filter out CSS only for iPad. It is for 1024x768 resolution.

@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait) {

}
@media all and (device-width: 1024px) and (device-height:768px) and (orientation:landscape) {

}

I want to ask if this code will work on all iPad versions like iPad 1-4, iPad Mini, iPad Air.

If not, I need pure CSS code that will detect all possible versions of iPad in both portrait and landscape modes. Also make sure that code works for iPad 1-2 and iPad with Retina Display.

Possible duplicate of http://stackoverflow.com/questions/3839809/detect-iphone-ipad-purely-by-css or http://stackoverflow.com/questions/11680095/detecting-ipad-iphone-using-media-queries? — W.D., Apr 25 '14 at 07:47
Be aware that you will not be able to detect the iPad mini, since it has the same resolution as any other iPad. — rckoenes, Apr 25 '14 at 07:49
Will be same code work for iPad 1-2 and iPad with retina display? — Humayun Shabbir, Apr 25 '14 at 08:18

Humayun Shabbir · Accepted Answer · 2014-06-13T22:56:34.500

Here are useful CSS Media Queries for iPad and iPad with Retina Display.

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 */}

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 in portrait & landscape

@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 */ }

Ref: http://stephen.io/mediaqueries/

Pure CSS Code to detect any version of iPad both portrait and landscape

1 Answers1