iOS Media Queries.css

.visible-ipad, .visible-iphone, .visible-retina, .visible-non-retina, .visible-retina-iphone, .visible-non-retina-iphone, .visible-ios { display: none; }
.hidden-ipad, .hidden-iphone, .hidden-retina, .hidden-non-retina, .hidden-retina-iphone, .hidden-non-retina-iphone, .hidden-ios { display: block; }

/* ---------- iPad Only ---------- */
@media only screen and (device-width: 768px) {
  .visible-ipad { display: block; }
  .hidden-ipad { display:none; }
  .visible-ios { display: block; }
  .hidden-ios { display:none; }
}
 
/* ---------- iPhone/iPod Only ---------- */
@media only screen and (device-width: 320px) {
  .visible-iphone { display: block; }
  .hidden-iphone { display:none; }
  .visible-ios { display: block; }
  .hidden-ios { display:none; }
}
 
/* ---------- Retina Device Only ---------- */
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
  .visible-retina { display: block; }
  .hidden-retina { display:none; }
}
 
/* ---------- Non Retina Device Only ---------- */
@media only screen and (-webkit-max-device-pixel-ratio: 1) {
  .visible-non-retina { display: block; }
  .hidden-non-retina { display:none; }
}
 
/* ---------- Retina iPhone/iPod Only ---------- */
@media only screen and (device-width: 320px) and (-webkit-min-device-pixel-ratio: 2) {
  .visible-retina-iphone { display: block; }
  .hidden-retina-iphone { display:none; }
}
 
/* ---------- Non Retina iPhone/iPod Only ---------- */
@media only screen and (device-width: 320px) and (-webkit-max-device-pixel-ratio: 1) {
  .visible-non-retina-iphone { display: block; }
  .hidden-non-retina-iphone { display:none; }
}