My standard mixins for responsive mobile design.

mixins.scss

@import "compass/reset";
@import "compass";
@import "compass/css3";

@mixin breakpoint($point: '') {
	@if $point == iPab {
		/* iPads (portrait and landscape) ----------- */
		@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
			@content;
		}
	}
	@else if $point == iPap {
		/* iPads (portrait) ----------- */
		@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
			@content;
		}
	}
	@else if $point == iPal {
		/* iPads (landscape) ----------- */
		@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
			@content;
		}
	}
	@else if $point == i5b {
		/* iPhone 5 */
		@media only screen and (-webkit-min-device-pixel-ratio: 2) and (max-device-height: 568px) {
			@content;
		}
	}
	@else if $point == i5p {
		/* iPhone 5 Portrait */
		@media only screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait) {
			@content;
		}
	}
	@else if $point == i5l {
		/* iPhone 5 Landscape */
		@media only screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape) {
			@content;
		}
	}
	@else if $point == 3GiPhb {
		/* Smartphones (portrait and landscape) ----------- */
		@media only screen and (-webkit-max-device-pixel-ratio: 1) and (min-device-width: 320px) and (max-device-width: 480px) {
			@content;
		}
	}
	@else if $point == 3GiPhp {
		/* Smartphones (portrait) ----------- */
		@media only screen and (-webkit-max-device-pixel-ratio: 1) and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: portrait) {
			@content;
		}
	}
	@else if $point == 3GiPhl {
		/* Smartphones (landscape) ----------- */
		@media only screen and (-webkit-max-device-pixel-ratio: 1) and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: landscape) {
			@content;
		}
	}
	@else if $point == iPhb {
		/* Smartphones (portrait and landscape) ----------- */
		@media only screen and (-webkit-device-pixel-ratio: 2) and (device-width: 320px) and (device-height: 480px) {
			@content;
		}
	}
	@else if $point == iPhp {
		/* Smartphones (portrait) ----------- */
		@media only screen and (-webkit-device-pixel-ratio: 2) and (device-width: 320px) and (device-height: 480px) and (orientation: portrait) {
			@content;
		}
	}
	@else if $point == iPhl {
		/* Smartphones (landscape) ----------- */
		@media only screen and (-webkit-device-pixel-ratio: 2) and (device-width: 320px) and (device-height: 480px) and (orientation: landscape) {
			@content;
		}
	}
	@else if $point == alliPhones {
		/* All iPhones ----------- */
		@media only screen and (max-device-width: 568px) {
			@content;
		}
	}
	@else if $point == alliPhonesP {
		/* All iPhones Portrait ----------- */
		@media only screen and (max-device-width: 568px) and (orientation: portrait) {
			@content;
		}
	}
	@else if $point == alliPhonesL {
		/* All iPhones Landscape ----------- */
		@media only screen and (max-device-width: 568px) and (orientation: landscape) {
			@content;
		}
	}
	@else if $point == retina {
		/* All Retina Displays */
		@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
			@content;
		}
	}
}

body {
	height: 100%;
	width: 100%;
	overflow: hidden;
	@include breakpoint(alliPhones) {
		-webkit-text-size-adjust: 100%;
	}
	@include breakpoint(iPhp) { // iPhone Portrait
		width: 320px;
		min-width: 320px;
		max-width: 320px;
		height: 460px;
		min-height: 460px;
		max-height: 460px;
	}
	@include breakpoint(iPhl) { // iPhone Landscape
		width: 480px;
		max-width: 480px;
		min-width: 480px;
		height: 320px;
		min-height: 320px;
		max-height: 320px;
	}
	@include breakpoint(i5p) { // iPhone 5 Portrait
		width: 320px;
		max-width: 320px;
		min-width: 320px;
		height: 548px;
		min-height: 548px;
		max-height: 548px;
	}
	@include breakpoint(i5l) { // iPhone 5 Landscape
		width: 568px;
		max-width: 568px;
		min-width: 568px;
		height: 320px;
		min-height: 320px;
		max-height: 320px;
	}
	@include breakpoint(iPap) { // iPad Portrait
		width: 768px;
		max-width: 768px;
		min-width: 768px;
		height: 1024px;
		min-height: 1024px;
		max-height: 1024px;
	}
	@include breakpoint(iPal) { // iPad Landscape
		width: 1024px;
		max-width: 1024px;
		min-width: 1024px;
		height: 768px;
		min-height: 768px;
		max-height: 768px;
	}
}