SCSS Mixin for media queries that target iPhone 5/s, 6/s, 6/s Plus in portrait mode

iphone-portrait-media-queries.scss

/*
 * Media Queries for 📱 5 📱 6 & 📱 6+ in Portrait Mode
 *
 * Note: Do these in order of smallest to largest
 * Example:
 *
 *  @include respond-to(iPhone5) { top: 10px; }
 *  @include respond-to(iPhone6) { top: 12px; }
 *  @include respond-to(iPhone6Plus) { top: 14px; }
 *
 */

@mixin respond-to($media) {
  @if $media == iPhone5 {
    @media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 2) {
      @content;
    }
  }
  @else if $media == iPhone6 {
    @media only screen and (min-device-width : 375px) and (max-device-width : 667px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 2) {
      @content;
    }
  }
  @else if $media == iPhone6Plus {
    @media only screen and (min-device-width : 414px) and (max-device-width : 736px) and (-webkit-min-device-pixel-ratio: 3) and (orientation : portrait) {
      @content;
    }
  }
}