Device detection for Media Queries helper

CSS media queries are a cool way to customize your website’s look depending on the device for which is serving. If you need inspiration, you can always have a look at mediaqueri.es. Unfortunately, in many cases the ability to customize the CSS depending on the screen is not sufficient and you might want to thing a completely different DOM structure (separate CSS/JavaScript files depending on the device).

You may also want to separate versions by providing different URLs (table.site.com, m.site.com and site.com) for a set of reasons. Usually, you can accomplish this using two approaches (server-side detection based on user agent or client-side detection based on features).

This is where Device.JS comes into action. This JavaScript library is a great starting point for doing semantic, media query-based device detection without needing special server-side configurations saving you some great time.

Device.js is a starting point for doing semantic, media query-based device detection without needing special server-side configuration, saving the time and effort required to do user agent string parsing. The library is very easy to use and all you have to do is include device.js in every version of the web application and write some media query code like so (see example below). You can also trigger different dives easily.



// Trigger specific devices.
Desktop
Tablet
Phone

Device detection for Media Queries helper

Media Query helper

View Device.JS

Leave a Reply