PPK's mobile web book - Viewport

gistfile1.md

My technical notes/suggestions about the Viewport chapter on ppk's amazing mobile web book:

1. About Media Queries, in the Syntatic Notes section there is: "all media queries require a media type". It's true, a media type is always applied, but the spec allows you to omit it if it's all and. In http://www.w3.org/TR/css3-mediaqueries/#media0 right above the Example 5, it says: "A shorthand syntax is offered for media queries that apply to all media types; the keyword ‘all’ can be left out (along with the trailing ‘and’). I.e. if the media type is not explicitly given it is ‘all’." So we can just use @media (min-width: 200px){} and I think that's the syntax that should be preferred.

2. About ems in media queries. It misses the main point why em media queries became famous in the first place: page zoom on Desktop WebKit browsers didn't work with px media queries. That is, WebKit had a bug and didn't recalculate the media queries when page zoom was applied (it was like the 'px' in media queries referred to device pixels, not CSS pixels). Someone discovered that 'em' media queries where reevaluated correctly and so everyone started using it. Now that the bug is fixed (https://bugs.webkit.org/show_bug.cgi?id=53186) em media queries are not needed anymore (http://stackoverflow.com/questions/22228568/switching-to-em-based-media-queries).

3. About the orientation media query. Is says it's a easy case that has no complicated stuff. I remember the Motorola Xoom was a famous device that had its orientations definitions reversed because they thought the natural device orientation should be called portrait. (don't know if it's common in more recent devices; and it's definitely against the spec) Also opening the soft keyboard can change the orientation if it's big enough. As MDN puts it: "[the orientation media query] does not correspond to actual device orientation. Opening the soft keyboard on most devices in portrait orientation will cause the viewport to become wider than it is tall, thereby causing the browser to use landscape styles instead of portrait." (https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries#orientation)

4. About devicePixelRatio, the book says: "its unitless value gives the ratio between the physical screen size in pixels and the ideal viewport". Maybe it's worth mentioning this value isn't static on Desktop and can change with page zoom (also resolutions media queries are also reevaluated). (http://w3-org.9356.n7.nabble.com/Behavior-of-device-pixel-ratio-under-zoom-td6589.html)