Turn off jQuery Mobile when accessed from non-mobile device

Question

Here is my situation - I'm working on a web-site using only JQM controls and doesn't matter, if the site is accessed from desktop or mobile device the site is using JQM controls. I'm using ASP.NET so inside the code a typical controls look like this:

<asp:Button runat="server" data-theme="b" data-icon="check" data-mini="true" SkinID="btnSelectMiniB"/>    
<asp:Button runat="server" data-theme="b" data-icon="arrow-r" data-iconpos="right" data-mini="true" SkinID="btnViewMiniB"/> 
<asp:DropDownList runat="server" data-theme="b" SkinID="ddlThemeB"></asp:DropDownList>

I need a technique that will allow me to incorporate new styling for non-mobile devices, without creating new website. Can I turn off JQM scripts and CSS somehow, if my web-site is accessed via mobile browser? Are these data tags going to be a problem, if I turn off the JQM (somehow). Are there any other underwater stones that could appear? How can I then handle the situation, when the site is accessed via mobile devices and I need to override the desktop styling?

Any starting tips with code snippets will be highly appreciated.

Answer 1

Edit: If you are using still modernizr's utility api after detecting if mobile or desktop stackoverflow how to detect mobile, modernizr comes with a dynamic script and css loader called yepnope.js, which you can use to inject JQM js and css when needed. There are alternatives of course for example, require.js, LAB.js etc.. you might need to look at if they fit your need

Answer 2

Assuming you already have a reliable way to detect if the user is on a mobile device, I would create dedicated classes named desktop and mobile (eventually tablet if you're targeting them) and toggle the javascript on and off according to the presence of those classes in the html tag - like it's done in Modernizr.

Once you have those classes loading with your application, you can put all the javascript for mobile within the following conditions:

if ($('html').hasClass('mobile')) {
    // load mobile js
}

or

if ($('.mobile').length > 0) {
    // load mobile js
}

The same for desktop and tablet.

If you can't get these classes to load with your application, you can trigger the different javascript through a responsive approach:

// calculate viewport width
function responsive(){
    var scaffolding = '';
    var w = parseInt($(window).innerWidth(), 10);
    if (w < 480) { scaffolding = 'mobile'; }
    if (w >= 480 && w <= 980) { scaffolding = 'tablet'; }
    if (w > 980) { scaffolding = 'desktop'; }
    return scaffolding;
}

if (responsive() == 'mobile') {
    // load mobile js
}

if (responsive() == 'tablet') {
    // load tablet js
}

if (responsive() == 'desktop') {
    // load desktop js
}

If I would do this in the best possible way, I would separate mobile resources from desktop resources already from the server-side, because in both solutions I've suggested everything would still load (and claim bandwidth), even though only the relevant javascript would run. But that kind of solution would require insight on your current setup...

Answer 3

I'm assuming that you will be using media queries for changes to your CSS, if that is the case you can detect the changes in the CSS and load jQuery mobile based on that.

Working Example

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
    /* Styles */
    html {
        background:rgb(255, 0, 0); /* red */
    }
}

$(function () {
    var color = $('html').css('backgroundColor');

    if (color == 'rgb(255, 0, 0)') {

        $.getScript("http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js", function () {
            alert("Script loaded and executed.");
            // here you can use anything defined in the loaded script

        });
    }
    // add additional if statements here

});

I used background-color for the example, but you can use any style that will be changed in the media queries.

API Documentation for .getScript()

Answer 4

Use Modernizr's touch event detection. It will add a class to the body tag or you can test it with javascript.

http://modernizr.com/docs/#touch