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.
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
{
// CSS Styles
}
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape)
{
// CSS Styles
}
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait)
{
// CSS Styles
}
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
}
@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
}
@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
}
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
<br></br>
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 1)
{
// CSS Style
}
<br></br>
<br></br>
@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
}
<br></br>
<br></br>
@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
}
<br></br>
The iPad Mini has the same resolution and pixel ratio as the iPad 1 & 2. ## iPad Mini In Portrait & Landscape
<br></br>
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 1)
{
// CSS Style
}
<br></br>
<br></br>
@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
}
<br></br>
<br></br>
@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
}
<br></br>
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
{
// CSS Style
}
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : landscape)
{
// CSS Style
}
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : portrait)
{
// CSS Style
}
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px)
{
// CSS Style
}
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px)
and (orientation : landscape)
{
// CSS Style
}
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px)
and (orientation : portrait)
{
// CSS Style
}
/*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){
}