Detect user device and assign different jquery (desktop / mobile(ipad)) in js/ jquery?

Question

<script src="jsv3/jquery.js"></script>
<!--<script src="jsv3/jquery.mobile-1.2.0.min.js"></script>-->

Currently I have insert script for desktop version only because I found that declare two jquery will occur error. Are there any way to check the device type and select different jquery plugin for corresponding device? Thanks

Can you use a server side language, such as PHP? If you can, this might help: http://detector.dmolsen.com/ — Toddish, Dec 14 '12 at 10:05

score 2 · Accepted Answer · answered Dec 14 '12 at 10:13

There are many ways to detect the client. Following example involves userAgent to detect the type of client device.

 $(document).ready(function(e) {

        if(navigator.userAgent.match(/Android/i)
             || navigator.userAgent.match(/webOS/i)
             || navigator.userAgent.match(/iPhone/i)
             || navigator.userAgent.match(/iPad/i)
             || navigator.userAgent.match(/iPod/i)
             || navigator.userAgent.match(/BlackBerry/i)
             || navigator.userAgent.match(/Windows Phone/i)) {


          var file=document.createElement("link");
          file.setAttribute("rel", "stylesheet");
          file.setAttribute("type", "text/css");
          file.setAttribute("href", "css/alternate_css_file.css");
          document.getElementsByTagName("head")[0].appendChild(file);

          var file_2= document.createElement("script");
          file_2.setAttribute("type", "text/javascript");
          file_2.setAttribute("src", "js/alternate_js_file.js");
          document.getElementsByTagName("head")[0].appendChild(file_2);

    }

    });

This is a general solution for detecting client devices. You may have to use different CSS for tablets clients like iPad.

if the jquery follow by some other jquery script e.g. jquery ui , it return me error of jquery is undefined. However, I see the , how to fix this? thx — Leo Chan, Dec 14 '12 at 10:34

score 1 · Answer 2 · answered Dec 14 '12 at 10:14

1

if (navigator.userAgent=="<type>"){ //check your device type

  var fileref=document.createElement('script')
  fileref.setAttribute("type","text/javascript")
  fileref.setAttribute("src", filename)
 }

HTH

answered Dec 14 '12 at 10:14

Sovan

104
3

Detect user device and assign different jquery (desktop / mobile(ipad)) in js/ jquery?

2 Answers2