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.

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.

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.