Created

Embed URL

HTTPS clone URL

SSH clone URL

You can clone with HTTPS or SSH.

Download Gist

iOS Media Queries for iPhone/iPod vs iPad & Retina vs Non-Retina Devices

View iOS Media Queries.css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31
.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; }
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
  .retina-only { display: block; }
}

This is not retina only this is also for android xhdpi

In fact, none of these are iOS/iPhone/iPad only. The media queries merely address screen sizes and pixel densities.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.