5

Possible Duplicate:
iPhone 5 CSS media query

The iPhone 5 tech spec states screen dimension of 1136 by 640

My question is this,

For landscape, ff I am to use the max-device-width of 568px refer to http://www.stephentgilbert.com/mediaqueries/#iPhone

can you explain why that works when the dimension stated on the iPhone 5 site says the width would be 1136px

I know I'm mixing up with some of the fundamentals here. I'd appreciate if you could provide me with a proper explanation and perhaps link me to relevant online resources.

Community
  • 1
  • 1
Mizanur Chowdhury
  • 79
  • 1
  • 1
  • 6
  • The [viewport on mobile Safari](http://developer.apple.com/library/ios/#documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html) is not what you'd expect. – jeffjenx Jan 14 '13 at 19:53
  • Thank you for the link @MrSlayer , excellent resource! Much appreciate it :) – Mizanur Chowdhury Jan 14 '13 at 20:20

2 Answers2

21

The iPhone's Retina display means the 1136x640 screen uses 568x320 virtual pixels. Each CSS pixel is made up of four physical pixels (2x2).

Since no one who says "give me a 100px wide div here" in CSS wants it to show up at half-size on a higher-resolution device like a Retina display, it doesn't use the physical pixels as CSS pixels.

ceejayoz
  • 176,543
  • 40
  • 303
  • 368
9

The Retina display contains twice as many pixels as the standard display, but iOS treats the resolution as the standard display for measurement and screen output. If it didn't, websites would all look very tiny and zoomed out.

AlienWebguy
  • 76,997
  • 17
  • 122
  • 145