Every element of web design, including working with HTML5 and CSS3 has its bugs, exceptions, and things that just don't work right. Our aim here is to provide tools, approaches, and techniques so that you can dissect and solve as many of those issues as possible, without addressing every likely hurdle specifically.
However, Apple's iPhone is both the dominant and defining player in the smartphone realm and as you might have guessed, the resolution-based media query technique that we have explored here (that is supposedly "standardized" in CSS3) does not work on iPhones.
The reason is, put somewhat over-simply, that Apple has decreed that the tiny screen on an iPhone is actually a full-sized screen. Here is the math behind that assertion: A typical laptop computer might display something like 130 pixels per inch (ppi). Resolutions vary significantly, but that 130 pixels per inch standard is a useful mean for understanding the iPhone challenge. Calculated...