Targetting iPhone 4 and 5 separately with media queries

问题

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?

回答1:

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

回答2:

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) {}

回答3:

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)
{
    ...
}

来源：https://stackoverflow.com/questions/20718864/targetting-iphone-4-and-5-separately-with-media-queries

标签

css

css3

twitter-bootstrap

media-queries