Search code examples
cssresponsive-designmedia-queries

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?

Solution

  • 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)