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"
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.