0

I am working on a web page which works good on desktop with parallax, vertical scroll & more. I have some JavaScript files, but its not support on mobile devices, so I need to remove those Java Script files on mobile devices, how can I do this?

and i need this on responsive mode also (need to work on desktop when reduce the window size (below 1000px))

Xavier Deva Arul
  • 29
  • 3
  • what are we talking about here, php, asp.net, apache servers? dont you think is easier just to create a function in php and just add the those files if it is not a mobile? – jycr753 Feb 24 '14 at 07:15
  • First off, you can't really define what is and isn't "mobile" any moreas you can find "mobile" tablets running desktop operation systems. You need to figure out exactly which browsers are and aren't supported or even better which features you need to detect and target those, not the concept of "mobile". – jfriend00 Feb 24 '14 at 07:21

3 Answers3

1

You could detect if the device is as mobile device in JS with a function like this: 

window.isMobile = function() {
var check = false;
(function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))check = true})(navigator.userAgent||navigator.vendor||window.opera);
return check; }

And then wrap the javascript code you want to avoid on mobile devices with an if: 

if(!isMobile()){ 
     ... your code here ...
}

I found this function in this answer: Detecting a mobile browser

Community
  • 1
  • 1
Emilio Rodriguez
  • 5,302
  • 3
  • 25
  • 32
  • 2
    Try always to give credit to the **Original Author** : http://stackoverflow.com/questions/11381673/javascript-solution-to-detect-mobile-browser // http://detectmobilebrowsers.com/ not just plain copy/paste. If you think the Question has a duplicate, than help us close such questions. – Roko C. Buljan Feb 24 '14 at 07:27
1

If pure Javascript is required you can try this one out. An extension to emilioicai's answer.

So to do the work I did this. Here i'm loading JS dynamically, So if page will be requested by mobile browser the JS will not be loaded else it will.

<html>
<head>
    <title></title>
    <script>
        function loadJs(isMobile) {
            if (!isMobile) {
                var fileref = document.createElement('script');
                fileref.setAttribute("type", "text/javascript");
                fileref.setAttribute("src", "Scripts/JavaScript1.js");
                document.head.appendChild(fileref)
            }
        }
        var mobile = false;
        function checkMobile() {
           loadJs(mobile);
        }
        checkMobile();
    </script>
</head>
<body>
    <!--body here-->
</body>
</html>
yogi
  • 17,657
  • 12
  • 53
  • 89
  • Removing a script tag does not remove the scripts. They have already been run and processed. – jfriend00 Feb 24 '14 at 07:45
  • You really ought to just remove the first option from your answer since it doesn't work. The second one will work if the page can handle async loading of the script. – jfriend00 Feb 24 '14 at 08:38
0

You should check out Modernizr - it allows you to check for various features and conditionally load files as a result.

Patrick
  • 13,085
  • 5
  • 30
  • 49