1

I have these media queries to apply different styles for iPhone 4 and iPhone 5

/* iPhone 4 (landscape) */
@media only screen and (min-width:320px) and (max-width:480px) and (orientation:landscape) { 
    .background img {
      height: 5px;
    }
}
/* iPhone 4 (portrait) */
@media only screen and (min-width:320px) and (max-width:480px) and (orientation:portrait) { 
    .background img {
      height: 10px;
    }
}
/* iPhone 5 (landscape) */
@media only screen and (min-width:320px) and (max-width:568px) and (orientation:landscape) { 
    .background img { 
      height: 245px;
    }
    .logo img {
        height: 205px;
        width: 205px;
    }
}
/* iPhone 5 (portrait) */
@media only screen and (min-width:320px) and (max-width:568px) and (orientation:portrait) { 
    .background img {
      height: 210px;
    }
    .logo img {
        height: 170px;
        width: 170px;
    }
    .top-content h2 {
        font-size: 1.8em;
        line-height: 120%;
        margin-bottom: 20px;
    }
    .main-container {
        margin-top: 30px;
        margin-left: 15px;
        margin-right: 15px;
    }
}

The problem is that on iPhone 5, the styles for iPhone 4 are applied too. How can I prevent this?

strivedi183
  • 4,749
  • 2
  • 31
  • 38
Yan
  • 13
  • 1
  • 4
  • Hello Yan, welcome to Stack Overflow. In the future, please indent your code samples and mark them as code in the editor, so that they can be syntax highlighted and understood more easily. Thanks! – janfoeh Dec 21 '13 at 12:41
  • You shouldn't need separate media queries to account for differing vertical viewport size. Consider using `fixed` positioning, for example. – Dai Dec 21 '13 at 12:43
  • can you give me an example? – Yan Dec 21 '13 at 13:03

3 Answers3

11

Another useful media feature is device-aspect-ratio.

Note that the iPhone 5 does not have a 16:9 aspect ratio. It is in fact 40:71.

iPhone < 5:
@media screen and (device-aspect-ratio: 2/3) {}

iPhone 5:
@media screen and (device-aspect-ratio: 40/71) {}

iPad:
@media screen and (device-aspect-ratio: 3/4) {}

Reference: Media Queries @ W3C

Adam 'Sacki' Sackfield
  • 594
  • 1
  • 4
  • 19
0

In addition to Adam's helpful answer I've expanded this further to try and push my CSS to just the iPhone and iPad for both orientations in my case. The below may be useful for anyone looking at this question:

/* iPhone 5/5S Retina Display Portrait */
@media screen and (device-aspect-ratio: 40/71) and (max-device-width: 640px) and (orientation:portrait) {}

/* iPhone 5/5S Retina Display Landscape */
@media screen and (device-aspect-ratio: 40/71) and (max-device-width: 640px) and (orientation:landscape) {}

/* iPad 3/4/Air Retina Display Portrait */
@media screen and (device-aspect-ratio: 3/4) and (max-device-width: 1536px) and (orientation:portrait) {}

/* iPad 3/4/Air Retina Display Landscape */
@media screen and (device-aspect-ratio: 3/4) and (max-device-width: 1536px) and (orientation:landscape) {}
Samson275511
  • 31
  • 3
0

Media screen for the particular iPhone 4 is as follows:

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-device-pixel-ratio: 2) and (device-aspect-ratio: 2/3)
{
    ...
}
Cliffordwh
  • 1,422
  • 1
  • 10
  • 18
SUBHRANSU
  • 1