Common Media Queries + Debug (Compass/SASS)

_mediaqueries.sass

$debug:                     true
=debug-display($debugText)
  @if $debug == true
    &::before
      content: '#{$debugText}'

/* iPads (portrait and landscape) -----------

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px)
  +debug-display('iPads (portrait and landscape)')

/* iPads (landscape) -----------

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape)
  +debug-display('iPads (landscape)')

/* iPads (portrait) -----------

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait)
  +debug-display('iPads (portrait)')

/* iPhone 4 - (portrait) ----------

@media only screen and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait), only screen and (min-device-pixel-ratio: 2) and (orientation: portrait)

  +debug-display('iPhone 4 - (portrait)')

/* iPhone 4 - (landscape) ----------
@media screen and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape), screen and (min-device-pixel-ratio: 2) and (orientation: landscape)

  +debug-display('iPhone 4 - (landscape)')

/* Smartphones (landscape) -----------

@media only screen and (min-width: 321px) and (max-width: 480px)

  +debug-display('Smartphones (landscape)')

/* Smartphones (portrait) -----------

@media only screen and (max-width: 320px)

  +debug-display('Smartphones (portrait)')