iphone all devices media query mixins. Last thing you will ever need.

_iphone_mixin.scss

// iphone XPro Max
@mixin ipxm-p {
	/* iPhone XPro Max portrait */
	@media only screen and (min-device-width: 414px) and (max-device-width: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait) {
		@content;
	}
}

@mixin ipxm-l {
	/* iPhone XPro Max landscape */
	@media only screen and (min-device-width: 414px) and (max-device-width: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape) {
		@content;
	}
}

// iphone XR
@mixin ipxr-p {
	/* iPhone XR portrait */
	@media only screen and (min-device-width: 414px) and (max-device-width: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait) {
		@content;
	}
}

@mixin ipxr-l {
	/* iPhone XR landscape */
	@media only screen and (min-device-width: 414px) and (max-device-width: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape) {
		@content;
	}
}

// iphone X,XS,xPro
@mixin ipx-p {
	/* iPhone X portrait */
	@media only screen and (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait) {
		@content;
	}
}

@mixin ipx-l {
	/* iPhone X landscape */
	@media only screen and (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape) {
		@content;
	}
}

// iphone 6,7,8
@mixin ip678-p {
	/* iPhone 678 portrait */
	@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
		@content;
	}
}

@mixin ip678-l {
	/* iPhone 678 landscape */
	@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
		@content;
	}
}

// iphone 6,7,8 Plus
@mixin ip678p-p {
	/* iPhone 678 Plus portrait */
	@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 3) {
		@content;
	}
}

@mixin ip678p-l {
	/* iPhone 678 Plus landscape */
	@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 3) {
		@content;
	}
}

// iPhone 5,5s,se
@mixin ip5-p {
	/* iPhone 5,5s,SE portrait */
	@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
		@content;
	}
}

@mixin ip5-l {
	/* iPhone 5,5s,SE landscape */
	@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
		@content;
	}
}