Skip to content

Instantly share code, notes, and snippets.

@tonywok
Created October 19, 2011 19:08
Show Gist options
  • Save tonywok/1299333 to your computer and use it in GitHub Desktop.
Save tonywok/1299333 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;
}
}
@tonywok
Copy link
Author

tonywok commented Nov 4, 2011

@ashfame
Copy link

ashfame commented Dec 9, 2012

@tonywok It can use some love, now that we iOS devices have evolved further http://www.iosres.com/ :)

iPad 3 & 4 and iPod Touch 5G also have a retina display.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment