public
Last active

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

  • Download Gist
iOS Media Queries.css
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

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.