Common mobile device media queries.

mobile-media-queries.css

/* NOTES: This is my personal collection which I plan to try and keep */
/* up to date. There are a lot of snippets around the web but seem to */
/* rarely be a whole collection to choose from. */
 
/* ALL INPUT AND FEEDBACK WELCOME! */
 
/* iPad Mini - 1024x768, 163ppi. http://www.apple.com/ipad-mini/specs/ */
/* iPhone 5 - 1136x640, 326 ppi. http://www.apple.com/iphone/specs.html */
/* iPad '4' - 2048x1536, 264 ppi. http://www.apple.com/ipad/specs/ */
/* iPhone 4 - Actual: 960x640, Logical: 480x320. http://www.iphoneresolution.com/ */

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

/* iPhone 4s and below. iPhone and iPod measure max-device-xxx in logical pixels. */
/* http://stackoverflow.com/questions/5031482/how-to-target-iphone-3gs-and-iphone-4-in-one-media-query */
@media only screen 
and (max-device-width:320px) and (max-device-height:480px)
/*and (-webkit-device-pixel-ratio: 1)*//* iPhone 3Gs and below. */
/*and (-webkit-device-pixel-ratio: 2)*//* iPhone 4 + 4s. */
{}


/* Other possible resources: */
/*
http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
http://webdesignerwall.com/tutorials/css3-media-queries
*/
/*@media screen and (min-width:1024px)  and (max-width:1142px){}*/ /* 13.3 macbook */
/*@media screen and (min-width:801px)  and (max-width:1024px){}*/ /* ipad in landscape */
/*@media screen and (min-width:641px)  and (max-width:800px){}*/ /* ipad in portrait */
/*@media screen and (min-width:321px)  and (max-width:640px){}*/ /* iphone in landscape */
/*@media screen and (max-width:320px){}*/ /* iphone in portrait */