CCNA, CCNP, MCSA, CCNA Final Exam, All Answer Test Module With 100/100

I am trying to implement alternate layouts for both the iPad/iPhone and older iPhones as well. I have established that the best method is to use @media queries from the CSS3 spec, As such these are my media queries at the minute: @media screen and (max-width: 1000px) { ... } Above is for small desktop and laptop screens. @media screen and (max-width: 700px) { ... } Above is for the iPad and VERY small desktop/laptop screens. @media screen and (max-device-width: 480px) { ... } Above is for iPhone 3GS- and mobile devices in general. However, the new iPhone 4 with Steve Jobs's all-singing all-dancing "retina" display means that it has a pixel ratio of 2-1 meaning 1 pixel actually appears to the browser as 2x2 pixels making its resolution (960x640 - meaning it will trigger the iPad layout rather than the mobile device layout) so this requires ANOTHER media query (only so far supported by webkit): @media screen and (-webkit-min-device-pixel-ratio: 2) { ... } N