// iOS Media Queries // Goal: capture styles for iPhone, iPhone 3G, iPhone 3GS, iPhone 4, iPhone 4S, iPad, and iPad 2 // // Author: Tony Schneider (@tonywok) // Please tell me where I fail. :) // iPhone v(4,4S) portrait // test: black text (overwritten by v* portrait) with blue background @media all and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) { a { background-color: blue; color: red; } } // iPhone v(4/4S) landscape // test: orange text (overwritten by v* landscape) with green background @media all and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) { a { background-color: green; color: red; } } // iPhone v(*) portrait // test: black text @media all and (max-device-width: 480px) and (orientation: portrait) { a { color: black; } } // iPhone v(*) landscape // test: orange text @media all and (max-device-width: 480px) and (orientation: landscape) { a { color: orange; } } // iPad portrait // test: yellow text @media all and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) { a { color: yellow; } } // iPad landscape // test: purple text @media all and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) { a { color: purple; } }