Skip to content

Instantly share code, notes, and snippets.

@adamstac
Created September 17, 2011 13:58
Show Gist options
  • Star 17 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save adamstac/1223963 to your computer and use it in GitHub Desktop.
Save adamstac/1223963 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