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.

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.

• javascript
• responsive-design
• media-queries

• 1 This approach will work. I like that media queries stay with the CSS, where the rest of the formatting happens. – jalynn2 Commented Sep 15, 2014 at 13:45
• It is never that simple, since there are a plethora of widths ( and device-widths, watch the difference ) out there. I always advise mobiledetect. – loveNoHate Commented Sep 15, 2014 at 13:48

3 Answers 3

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

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?

JS produces different results for detecting viewport heights and widths depending on how you get them:

In that case, you could get screen width using window.outerWidth, window.innerWidth, document.documentElement.clientWidth. All these produce different results, but the second will give you values identical to CSS @media breakpoint.

$(window).width() too, is different from @media breakpoint.

I depends on browser differences, e.g. if the take in account the vertical scrollbar or not. Better go with CSS.