A media query boilerplate for responsive design that covers iPhones, iPhone 5s, tablets, and iPads for viewing sites and applications in both portrait and landscape mode.

complete-mobile-media-query-boilerplate.css

/**
 * Note that the following media queries are intended to be used for the specified device or screen size
 * in both portrait and landscape mode.
 *
 * Desktop queries are not provided since the default styles for most sites and applications typically focus
 * on that for the default sites.
 *
 * Contributes, comments, and all that fun stuff always welcome :).
 */
 
/* iPhone */
@media (min-width: 320px) and (max-width: 480px) {

}

/* iPhone 5 */
@media (min-width: 320px) and (max-width: 568px) {

}

/* Tablet */
@media (min-width: 600px) and (max-width: 800px) {

}

/* iPad 2, 3, mini */
@media (min-width: 768px) and (max-width: 1024px) {
} // iPad

simple-mobile-media-query-boilerplate.css

/* Handheld. Handles both portrait and landscape. */
@media (min-width: 320px) and (max-width: 568px) {

}

/* Tablet. Handles both portrait and landscape. */
@media (min-width: 600px) and (max-width: 800px) {

}

Media queries should be content specific, not device specific. The whole point of responsiveness is to NOT build device specific layouts.

I agree, to a point. I do think that content should drive responsiveness, but that doesn't change the fact that sometimes people ask for websites and applications to built with a specific device in mind.