CODEWITHSUNDEEP
cssresponsive-designmedia-queries
user25381
user25381

Reputation: 67

Is there any difference between iPhone 4 and iPhone 5 when I use media queries?

I know that iphone 5's resolution is 1136 x 640 px and iphone 4's 960 x 640 px. But are there differences in media queries when I build a responsive website?

So how can I determine is it a small screen netbook, or a new iphone 5 with high resolution?

Upvotes: 1

Views: 674

Answers (2)

Danield
Danield

Reputation: 125521

According to this site, the difference is with the max-device-width:

In iphone4 it's 480px

In iphone5 it's 568px

iphone4

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) { /* STYLES GO HERE */}

iphone5:

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) { /* STYLES GO HERE */ }

...and both have Device-pixel-ratio: 2 so

iphone4 has screen height= 960px (Actual Pixels) and

iphone5 has screen height= 1136px (Actual Pixels)

Upvotes: 2

GregH
GregH

Reputation: 43

I didn't have any luck with Danield's method, but I personally use this:

@media screen and (max-width:768px){
    /* iPad 2 and under */
}
@media screen and (max-width:375px){
    /* iPhone 6 and under */
}
@media screen and (max-width:320px){
    /* iPhone 5 and under */
}
@media screen and (max-device-width:320px) and (max-device-height:480px){
    /* iPhone 4 and under */
}

and if you need, iPhone 5 can also use:

@media screen and (max-device-width:320px) and (device-height:568px){
    /* iPhone 5 only */
}

Upvotes: 1

Related Questions