Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
iOS Media Queries
// 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;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.