javascript vs media queries

Question

I'm looking at creating a responsive framework for my website - its a first for me. No fancy stuff just responsive through mobile -> tablet -> desktop.

I'm happy with how media queries work, however adding classes through javascript seems like another viable option.

It would be easy to do something like this:

function queryViewport() {

    var $window = $(window);
    var $body = $("body");

    var windowWidth = $window.width();
    var windowHeight = $window.height();

    // Query window sizes to determine whether device is to be
    // classified as a small mobile device or a larger tablet/
    // desktop device.
    var isMobile = windowWidth < 600 || windowHeight < 600;

    $body.toggleClass("mobile", isMobile).toggleClass("desktop", !isMobile);

    // Calculate whether viewport is portrait or landscape
    var isPortrait = windowHeight > windowWidth;

    $body.toggleClass("portrait", isPortrait).toggleClass("landscape", !isPortrait);
}

However, I'm not an expert in this area - am I missing something or is it really that simple?

All advice appreciated.

Answer 1

I would suggest media queries, as all future amends can be done in the CSS without adding more and more logic to a separate JS file for new breakpoints.

Additionally, the CSS solution is supported down to IE9+ and there are JS polyfills (Respond) for backwards compatibility. Basically it's just built in to CSS and works well. There seems little point of rewriting the same logic in javascript, having a new class for every new size.

On top of this, media queries allow you to target CSS as different media types such as print, or if you want to use height-based media queries or target retina displays you can do this without having to add new classes. As a rule the convention is to use media queries with JS fallbacks and I see no reason to suggest otherwise.

Answer 2

you can use this minified jQuery snippet to detect if your user is viewing using a mobile device. If you need to test for a specific device I’ve included a collection of JavaScript snippets below which can be used to detect various mobile handheld devices such as iPad, iPhone, iPod, iDevice, Andriod, Blackberry, WebOs and Windows Phone.

if(jQuery.browser.mobile)
{
   console.log("You are using a mobile device!");
}
else
{
   console.log("You are not using a mobile device!");
}

See more DETECT MOBILE DEVICES USING JQUERY

See the link below to understand the difference

What is better: CSS media queries or JQuery mobile?