iOS Media Queries Boilerplate

19th December 2011 in Media Queries

Media Queries are now becoming quite common practice in web design. They allow you to change the CSS of the different elements on your web page depending on the size of the screen the visitor currently can see.

Below is a media query boilerplate you can use to change the design of your depending on if the user is using an iPad or and iPhone. This snippet even allows you to change the design if the device is landscape or portrait.

iPad In Portrait & Landscape

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)  
{ 
// CSS Styles
}

iPad In Landscape

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

iPad In Portrait

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

Retina Display iPads

To target iPad 3 and 4 you need to check for the device pixel ratio.

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) 
{ 
// CSS Styles
}

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) 
{ 
// CSS Styles
}

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) 
{  
// CSS Styles
}

iPad 1 & 2 Media Queries

If you want to target iPads 1 and 2 then you need to check for devices with a lower pixel ratio.

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)
{ 
// CSS Style
}

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)  
{ 
// CSS Style
}

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) { 
// CSS Style
}

iPad Mini Media Queries

The iPad Mini has the same resolution and pixel ratio as the iPad 1 & 2.

iPad Mini In Portrait & Landscape

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

iPad Mini 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)  
{ 
// CSS Style
}

iPad Mini 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) { 
// CSS Style
}

iPhone 5 In Portrait & Landscape

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
{ 
// CSS Style
}

iPhone 5 In Landscape

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

iPhone 5 In Portrait

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

iPhone 2G-4S In Portrait & Landscape

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) 
{ 
// CSS Style
}

iPhone 2G-4S In Landscape

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

iPhone 2G-4S In Portrait

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

iPhone 6 And iPhone 6+

/*iPhone 6 Portrait*/
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : portrait) { 

}

/*iPhone 6 landscape*/
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : landscape) { 

}

/*iPhone 6+ Portrait*/
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation : portrait) { 

}

/*iPhone 6+ landscape*/
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation : landscape) { 

}

/*iPhone 6 and iPhone 6+ portrait and landscape*/
@media only screen and (max-device-width: 640px), only screen and (max-device-width: 667px), only screen and (max-width: 480px){ 
}

/*iPhone 6 and iPhone 6+ portrait*/
@media only screen and (max-device-width: 640px), only screen and (max-device-width: 667px), only screen and (max-width: 480px) and (orientation : portrait){ 

}

/*iPhone 6 and iPhone 6+ landscape*/
@media only screen and (max-device-width: 640px), only screen and (max-device-width: 667px), only screen and (max-width: 480px) and (orientation : landscape){ 

}