Search code examples
cssresponsive-designmedia-queries

Which resolution i will use for retina display iphones - media query


I am using iPhone4 to test my responsive website

I had read that retina display will show 1px as 2px...

so my doubt is in landscape the device width 480px, screen resolution 640px..

but which one i want to use

@media only screen (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio: 2) {

or

@media only screen (max-device-width : 640px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio: 2) {

Solution

  • No matter what their resolution, you target all iPhones at 320px in portrait mode, and iPhone4S and under stick with 480px in landscape mode. (5 is a little wider in landscape.)