Skip to content

Instantly share code, notes, and snippets.

@acconrad
Created August 14, 2012 15:48
Show Gist options
  • Save acconrad/3350416 to your computer and use it in GitHub Desktop.
Save acconrad/3350416 to your computer and use it in GitHub Desktop.
How to target mobile devices with CSS Media Queries
@media only screen and (-webkit-device-pixel-ratio: .75) {
/* CSS for Low-density screens goes here *
* Ex: HTC Evo, HTC Incredible, Nexus One */
}
@media only screen and (-webkit-device-pixel-ratio: 1) and (max-device-width: 768px) {
/* CSS for Medium-density screens goes here *
* Ex: Samsung Ace, Kindle Fire, Macbook Pro *
* max-device-width added so you don't target laptops and desktops */
}
@media only screen and (-webkit-device-pixel-ratio: 1.5) {
/* CSS for High-density screens goes here *
* Ex: Samsung Galaxy SII, HTC Nexus One, HTC Evo 3D */
}
@media only screen and (-webkit-device-pixel-ratio: 2) {
/* CSS for Ultra-high-density (Retina) screens goes here *
* Ex: Samsung Galaxy SIII, HTC Evo LTE, iPhone 4 */
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment