Skip to content

Instantly share code, notes, and snippets.

@faun
Forked from adamstac/ios-media-queries.sass
Created November 28, 2011 21:33
Show Gist options
  • Save faun/1402176 to your computer and use it in GitHub Desktop.
Save faun/1402176 to your computer and use it in GitHub Desktop.
iOS Media Queries for iPhone/iPod, iPad & Retina and Non-Retina Devices
.ipad-only,
.iphone-only,
.retina-only,
.non-retina-only,
.retina-iphone-only,
.non-retina-iphone-only
display: none
// iPad Only
@media only screen and (device-width: 768px)
.ipad-only
display: block
// iPhone/iPod Only
@media only screen and (device-width: 320px)
.iphone-only
display: block
// Retina Device Only
@media only screen and (-webkit-min-device-pixel-ratio: 2)
.retina-only
display: block
// Non Retina Device Only
@media only screen and (-webkit-max-device-pixel-ratio: 1)
.non-retina-only
display: block
// Retina iPhone/iPod Only
@media only screen and (device-width: 320px) and (-webkit-min-device-pixel-ratio: 2)
.retina-iphone-only
display: block
// Non Retina iPhone/iPod Only
@media only screen and (device-width: 320px) and (-webkit-max-device-pixel-ratio: 1)
.non-retina-iphone-only
display: block
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment