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.

score 5 · Accepted Answer · edited May 23 '17 at 12:28

5

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

edited May 23 '17 at 12:28

Community

1
1

answered Aug 09 '13 at 14:37

nsawaya

622
5
8

2

Starting-up with HTML5 Boilerplate doesn't seem to be an option, the application is already there, and I assume Anton doesn't want to refactor the whole markup. CSS media queries won't stop the JQM from loading either. I don't mean to be rude but I don't see how this can be an answer to the question... – Wallace Sidhrée Aug 16 '13 at 11:32
@Anton Belev Wallace made a point I missed in your question, so I edited the answer accordingly. – nsawaya Aug 16 '13 at 14:26
Sorry that I'm responding. I'll have a look at your suggestion later today or tomorrow. Thanks for your answer! – Anton Belev Aug 17 '13 at 08:34
1

@nsawaya Modernizr and yepnote.js will be helpful. I liked the fact that yepnote.js allows you to inject js/css files when needed. However I'm using ASP.NET Themes and probably I'll have to come up with something that will switch themes rather than manually inject css. – Anton Belev Aug 19 '13 at 06:48

Wallace Sidhrée · Answer 2 · 2013-08-16T11:36:10.923

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

Sorry that I'm responding. I'll have a look at your suggestion later today or tomorrow. Thanks for your answer! — Anton Belev, Aug 17 '13 at 08:35

score 1 · Answer 3 · answered Aug 17 '13 at 15:06

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()

score 0 · Answer 4 · answered Aug 17 '13 at 04:27

0

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

answered Aug 17 '13 at 04:27

Jason Lydon

7,074
1
35
43

Turn off jQuery Mobile when accessed from non-mobile device

4 Answers4