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

iOS Media Queries.css

.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; }
}