Converting to a fully adaptive media query template

Everyone knows that responsive and adaptive templates have proven to be incredibly popular, and everyone is also very aware that mediaqueries with a bit of shiny JS are how to handle these types of websites properly, however, we've seen a lot of iDevice fans getting mixed up along the way,

The problem is that a large proportion of tablet and mobile devices out there are iPhones and iPads so frontend developers everywhere have been publishing media queries to only handle these devices making a lot of adaptive and even fully responsive websites not work on the full range of devices that are currently out there, such as the popular Windows Surface or Google Android Nexus range.

 

Anyway, recently I worked on a project and needed to create a proper full set of media queries which would make the page adapt well to varying resolutions and I came up with a 3-tiered solution to implement on top of an existing 960px build. I decided to go from the top down as it was being built over an existing template, normally you would go "bottoms up" so to speak. The 3 tiers are quite self explanatory and are basically: "Desktop/Landscape Tablet" > "Portrait tablet, Tiny Landscape devices (Archos TV viewer etc)" > "Mobile devices, anything under 690px in usable width"

 

1. Desktop media-query

Remember it won't work in IE6/7/8 without a polyfill

 

/* Desktop only */
@media only screen and (min-width: 961px) {
    
    /* Handle item swap-outs */
    .no-desktop { display:none !important; }
    
}

 

Portrait tablets / Low resolution landscape devices

Doesn't apply to mobiles

/* ONLY handle tablets in portrait/small res devices only. */
@media
        /* legacy webkit */
        only screen and (min-width:691px) and (max-width: 960px) and (-webkit-max-device-pixel-ratio:1),
        only screen and (min-device-height:691px) and (max-device-height: 960px) and (-webkit-min-device-pixel-ratio: 1.5) and (orientation: landscape),
        only screen and (min-device-width:691px) and (max-device-width: 960px) and (-webkit-min-device-pixel-ratio: 1.5) and (orientation: portrait),
        /* legacy firefox */
        only screen and (min-width:691px) and (max-width: 960px) and (max--moz-device-pixel-ratio:1),
        only screen and (min-device-height:691px) and (max-device-height: 960px) and (min--moz-device-pixel-ratio: 1.5) and (orientation: landscape),
        only screen and (min-device-width:691px) and (max-device-width: 960px) and (min--mozdevice-pixel-ratio: 1.5) and (orientation: portrait),
        /* modern webkit */
        only screen and (min-width:691px) and (max-width: 960px) and (max-device-pixel-ratio:1),
        only screen and (min-device-height:691px) and (max-device-height: 960px) and (min-device-pixel-ratio: 1.5) and (orientation: landscape),
        only screen and (min-device-width:691px) and (max-device-width: 960px) and (min-device-pixel-ratio: 1.5) and (orientation: portrait),
        /* modern firefox */
        only screen and (min-width:691px) and (max-width: 960px) and (max-resolution: 1dppx),
        only screen and (min-device-height:691px) and (max-device-height: 960px) and (min-resolution: 1.5dppx) and (orientation: landscape),
        only screen and (min-device-height:691px) and (max-device-width: 960px) and (min-resolution: 1.5dppx) and (orientation: portrait) {
}

 

Applies to the aforementioned, and anything below in resolution

/* handle tablets-portrait / low-res tablets such as media devices / mobiles including higher dpi */
@media
        /* legacy webkit */
        only screen and (max-width: 960px) and (-webkit-max-device-pixel-ratio:1),
        only screen and (max-device-height: 960px) and (-webkit-min-device-pixel-ratio: 1.5) and (orientation: landscape),
        only screen and (max-device-width: 960px) and (-webkit-min-device-pixel-ratio: 1.5) and (orientation: portrait),
        /* legacy firefox */
        only screen and (max-width: 960px) and (max--mozdevice-pixel-ratio:1),
        only screen and (max-device-height: 960px) and (min--mozdevice-pixel-ratio: 1.5) and (orientation: landscape),
        only screen and (max-device-width: 960px) and (min--mozdevice-pixel-ratio: 1.5) and (orientation: portrait),
        /* modern webkit */
        only screen and (max-width: 960px) and (max-device-pixel-ratio:1),
        only screen and (max-device-height: 960px) and (min-device-pixel-ratio: 1.5) and (orientation: landscape),
        only screen and (max-device-width: 960px) and (min-device-pixel-ratio: 1.5) and (orientation: portrait),
        /* modern firefox */
        only screen and (max-width: 960px) and (max-resolution: 1dppx),
        only screen and (max-device-height: 960px) and (min-resolution: 1.5dppx) and (orientation: landscape),
        only screen and (max-device-width: 960px) and (min-resolution: 1.5dppx) and (orientation: portrait) {
        
}

 

Mobile devices or any device considered too small

/* Mobile devices only, including higher dpi devices. */
@media
        /* S3/S2 hack for Samsung phones returning reverse device-width/width values */
        only screen and (max-device-width: 721px) and (max-width:361px) and (-webkit-min-device-pixel-ratio:2) and (orientation: portrait),
        only screen and (max-device-height: 1281px) and (max-height:400px) and (-webkit-min-device-pixel-ratio:2) and (orientation: landscape),
        /* legacy webkit */
        only screen and (max-width: 690px) and (-webkit-max-device-pixel-ratio:1),
        only screen and (max-device-width: 690px) and (-webkit-min-device-pixel-ratio: 1.5) and (orientation: portrait),
        only screen and (max-device-height: 690px) and (-webkit-min-device-pixel-ratio: 1.5) and (orientation: landscape),
        /* legacy firefox */
        only screen and (max-width: 690px) and (max--mozdevice-pixel-ratio:1),
        only screen and (max-device-width: 690px) and (min--mozdevice-pixel-ratio: 1.5) and (orientation: portrait),
        only screen and (max-device-height: 690px) and (min--mozdevice-pixel-ratio: 1.5) and (orientation: landscape),
        /* modern webkit */
        only screen and (max-width: 690px) and (max-device-pixel-ratio:1),
        only screen and (max-device-width: 690px) and (min-device-pixel-ratio: 1.5) and (orientation: portrait),
        only screen and (max-device-height: 690px) and (min-device-pixel-ratio: 1.5) and (orientation: landscape),
        /* modern firefox */
        only screen and (max-width: 690px) and (max-resolution: 1dppx),
        only screen and (max-device-height: 690px) and (min-resolution: 1.5dppx) and (orientation: landscape),
        only screen and (max-device-width: 690px) and (min-resolution: 1.5dppx) and (orientation: portrait) {
    
}

 

Media query notes

You'll notice that it all seems very repeated, and it is. Just as when we were moving to some of the earlier CSS3 effects (remember when you used to write 4 varients of code for box-shadow or border-radius) we're now only just getting standards appearing throughout the browsers (excluding Opera). You'll also notice in the Mobile media query chunk that there is a media query specifically for the Samsung Galaxy S3 - I'm sure there will be and is other devices, but as this is such a popular phone it's ridiculous to ignore it. As always, feel free to fork/spoon/bend the code. Free to use and redistribute as always, released under the GNU/GPL v3 licence.

 

 

 

 

CSS

Buy me a beer or a book?

amazon PayPal - The safer, easier way to donate online!

Free Downloads