Skip to content

Instantly share code, notes, and snippets.

@pietromalerba
Forked from mattyoho/ios-test.css
Created June 12, 2012 17:45
Show Gist options
  • Save pietromalerba/2918981 to your computer and use it in GitHub Desktop.
Save pietromalerba/2918981 to your computer and use it in GitHub Desktop.
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