javascript - JQuery में मोबाइल डिवाइस का पता लगाने का सबसे अच्छा तरीका क्या है?




mobile browser-detection (20)

JQuery का उपयोग करने के बजाय आप इसे पहचानने के लिए सरल जावास्क्रिप्ट का उपयोग कर सकते हैं:

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
 // some code..
}

या आप दोनों को jQuery के माध्यम से इसे और अधिक सुलभ बनाने के लिए जोड़ सकते हैं ...

$.browser.device = (/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(navigator.userAgent.toLowerCase()));

अब $.browser सभी उपरोक्त उपकरणों के लिए "device" वापस कर देगा

नोट: $.browser jQuery v1.9.1 पर हटा दिया गया। लेकिन आप jQuery माइग्रेशन प्लगइन Code का उपयोग कर इसका उपयोग कर सकते हैं

एक और गहन संस्करण:

var isMobile = false; //initiate as false
// device detection
if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|ipad|iris|kindle|Android|Silk|lge |maemo|midp|mmp|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(navigator.userAgent) 
    || /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(navigator.userAgent.substr(0,4))) { 
    isMobile = true;
}

क्या यह पता लगाने का कोई ठोस तरीका है कि उपयोगकर्ता jQuery में मोबाइल डिवाइस का उपयोग कर रहा है या नहीं? सीएसएस @media विशेषता के समान कुछ? यदि ब्राउज़र एक हैंडहेल्ड डिवाइस पर है तो मैं एक अलग स्क्रिप्ट चलाने की इच्छा रखूंगा।

JQuery $.browser फ़ंक्शन वह नहीं है जिसे मैं ढूंढ रहा हूं।


आप navigator.userAgent पर भरोसा नहीं कर सकते हैं, हर डिवाइस अपने वास्तविक ओएस को प्रकट नहीं करता है। उदाहरण के लिए मेरे एचटीसी पर, यह सेटिंग्स ("मोबाइल संस्करण का उपयोग कर चालू / बंद) पर निर्भर करता है। Http://my.clockodo.com पर , हमने बस छोटे उपकरणों का पता लगाने के लिए screen.width का उपयोग किया। दुर्भाग्य से, कुछ एंड्रॉइड संस्करणों में screen.width के साथ एक बग है। आप उपयोगकर्ता के साथ इस तरह गठबंधन कर सकते हैं एजेंट:

if(screen.width < 500 ||
 navigator.userAgent.match(/Android/i) ||
 navigator.userAgent.match(/webOS/i) ||
 navigator.userAgent.match(/iPhone/i) ||
 navigator.userAgent.match(/iPod/i)) {
alert("This is a mobile device");
}

इसमें एक समाधान मिला: http://www.abeautifulsite.net/blog/2011/11/detecting-mobile-devices-with-javascript/

var isMobile = {
    Android: function() {
        return navigator.userAgent.match(/Android/i);
    },
    BlackBerry: function() {
        return navigator.userAgent.match(/BlackBerry/i);
    },
    iOS: function() {
        return navigator.userAgent.match(/iPhone|iPad|iPod/i);
    },
    Opera: function() {
        return navigator.userAgent.match(/Opera Mini/i);
    },
    Windows: function() {
        return navigator.userAgent.match(/IEMobile/i);
    },
    any: function() {
        return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
    }
};

और फिर यह सत्यापित करने के लिए कि क्या यह मोबाइल है, आप इसका परीक्षण कर सकते हैं:

if(isMobile.any()) {
   //some code...
}

इसे इस्तेमाल करो:

/**  * jQuery.browser.mobile (http://detectmobilebrowser.com/)  * jQuery.browser.mobile will be true if the browser is a mobile device  **/ (function(a){jQuery.browser.mobile=/android.+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|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|e\-|e\/|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(di|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|xda(\-|2|g)|yas\-|your|zeto|zte\-/i.test(a.substr(0,4))})(navigator.userAgent||navigator.vendor||window.opera);

Then use this:

if(jQuery.browser.mobile)
{
   console.log('You are using a mobile device!');
}
else
{
   console.log('You are not using a mobile device!');
}

एक सरल और प्रभावी एक-लाइनर:

function isMobile() { return ('ontouchstart' in document.documentElement); }

हालांकि उपर्युक्त कोड टचस्क्रीन वाले लैपटॉप के मामले में ध्यान नहीं देता है। इस प्रकार, मैं @ जूलियन समाधान के आधार पर यह दूसरा संस्करण प्रदान करता हूं :

function isMobile() {
  try{ document.createEvent("TouchEvent"); return true; }
  catch(e){ return false; }
}

कभी-कभी यह जानना चाहता है कि उस डिवाइस के लिए विशिष्ट सामग्री दिखाने के लिए क्लाइंट किस ब्रांड डिवाइस का उपयोग कर रहा है, जैसे कि आईफोन स्टोर या एंड्रॉइड मार्केट के लिंक। आधुनिकीकरण बहुत अच्छा है, लेकिन केवल आपको ब्राउज़र क्षमताओं, जैसे एचटीएमएल 5, या फ्लैश दिखाता है।

प्रत्येक डिवाइस प्रकार के लिए एक अलग वर्ग प्रदर्शित करने के लिए jQuery में मेरा UserAgent समाधान यहां दिया गया है:

/*** sniff the UA of the client and show hidden div's for that device ***/
var customizeForDevice = function(){
    var ua = navigator.userAgent;
    var checker = {
      iphone: ua.match(/(iPhone|iPod|iPad)/),
      blackberry: ua.match(/BlackBerry/),
      android: ua.match(/Android/)
    };
    if (checker.android){
        $('.android-only').show();
    }
    else if (checker.iphone){
        $('.idevice-only').show();
    }
    else if (checker.blackberry){
        $('.berry-only').show();
    }
    else {
        $('.unknown-device').show();
    }
}

यह समाधान ग्राफिक्स मैनियाक से है http://graphicmaniacs.com/note/detecting-iphone-ipod-ipad-android-and-blackberry-browser-with-javascript-and-php/


नियंत्रण की एक अतिरिक्त परत जोड़ने के लिए मैं यह पता लगाने के लिए एचटीएमएल 5 स्टोरेज का उपयोग करता हूं कि यह मोबाइल स्टोरेज या डेस्कटॉप स्टोरेज का उपयोग कर रहा है या नहीं। यदि ब्राउज़र स्टोरेज का समर्थन नहीं करता है तो मेरे पास मोबाइल ब्राउज़र नामों की एक श्रृंखला है और मैं उपयोगकर्ता एजेंट की तुलना सरणी में ब्राउज़र के साथ करता हूं।

यह बहुत आसान है। यहां कार्य है:

// Used to detect whether the users browser is an mobile browser
function isMobile() {
    ///<summary>Detecting whether the browser is a mobile browser or desktop browser</summary>
    ///<returns>A boolean value indicating whether the browser is a mobile browser or not</returns>

    if (sessionStorage.desktop) // desktop storage 
        return false;
    else if (localStorage.mobile) // mobile storage
        return true;

    // alternative
    mobile = ['iphone','ipad','android','blackberry','nokia','opera mini','windows mobile','windows phone','iemobile','tablet','mobi']; 
    var ua=navigator.userAgent.toLowerCase();
    for (var i in mobile) if (ua.indexOf(mobile[i]) > -1) return true;

    // nothing found.. assume desktop
    return false;
}

मुझे आश्चर्य है कि किसी ने भी एक अच्छी साइट की ओर इशारा नहीं किया: http://detectmobilebrowsers.com/ इसने मोबाइल पहचान के लिए अलग-अलग भाषाओं में कोड तैयार किया है (इसमें शामिल है लेकिन सीमित नहीं है):

  • अमरीका की एक मूल जनजाति
  • एएसपी
  • सी#
  • आईआईएस
  • जावास्क्रिप्ट
  • nginx
  • पीएचपी
  • पर्ल
  • अजगर
  • रेल

और यदि आपको टैबलेट का पता लगाने की आवश्यकता है, तो अतिरिक्त RegEx पैरामीटर के लिए बस अनुभाग देखें।

एंड्रॉइड टैबलेट, आईपैड, किंडल फायर और प्लेबुक डिज़ाइन द्वारा नहीं खोजे जाते हैं। टैबलेट के लिए समर्थन जोड़ने के लिए, जोड़ें |android|ipad|playbook|silk पहले regex के लिए |android|ipad|playbook|silk


मेरे लिए छोटा छोटा है इसलिए मैं इस तकनीक का उपयोग कर रहा हूं:

सीएसएस फ़ाइल में:

/* Smartphones ----------- */
@media only screen and (max-width: 760px) {
  #some-element { display: none; }
}

JQuery / जावास्क्रिप्ट फ़ाइल में:

$( document ).ready(function() {      
    var is_mobile = false;

    if( $('#some-element').css('display')=='none') {
        is_mobile = true;       
    }

    // now i can use is_mobile to run javascript conditionally

    if (is_mobile == true) {
        //Conditional script here
    }
 });

मेरा उद्देश्य मेरी साइट "मोबाइल फ्रेंडली" होना था। इसलिए मैं सीएसएस मीडिया क्वेरीज़ का उपयोग स्क्रीन आकार के आधार पर तत्वों को दिखा / छुपाता हूं।

उदाहरण के लिए, मेरे मोबाइल संस्करण में मैं फेसबुक लाइक बॉक्स को सक्रिय नहीं करना चाहता, क्योंकि यह उन सभी प्रोफ़ाइल छवियों और सामान को लोड करता है। और यह मोबाइल आगंतुकों के लिए अच्छा नहीं है। इसलिए, कंटेनर तत्व को छिपाने के अलावा, मैं इसे jQuery कोड ब्लॉक (ऊपर) के अंदर भी करता हूं:

if(!is_mobile) {
    (function(d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) return;
        js = d.createElement(s); js.id = id;
        js.src = "//connect.facebook.net/pt_PT/all.js#xfbml=1&appId=210731252294735";
        fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
}

आप इसे http://lisboaautentica.com पर कार्रवाई में देख सकते हैं

मैं अभी भी मोबाइल संस्करण पर काम कर रहा हूं, इसलिए यह अभी भी इसे लिखने के रूप में नहीं दिख रहा है।

dekin88 द्वारा अद्यतन करें

मीडिया का पता लगाने के लिए एक जावास्क्रिप्ट एपीआई बनाया गया है। उपर्युक्त समाधान का उपयोग करने के बजाय बस निम्न का उपयोग करें:

$( document ).ready(function() {      
    var isMobile = window.matchMedia("only screen and (max-width: 760px)");

    if (isMobile.matches) {
        //Conditional script here
    }
 });

ब्राउज़र का समर्थन करता है: http://caniuse.com/#feat=matchmedia

इस विधि का लाभ यह है कि यह न केवल सरल और छोटा है, लेकिन यदि आप डीओएम में किसी भी डमी तत्वों को जोड़ने के बिना आवश्यक रूप से स्मार्टफोन और टैबलेट जैसे विभिन्न उपकरणों को सशर्त रूप से लक्षित कर सकते हैं।


मैं डिवाइस के प्रकार का उपयोग करने के लिए जांचने के लिए स्ट्रिंग के निम्नलिखित कॉम्बो का उपयोग करने का सुझाव दूंगा।

मोज़िला प्रलेखन स्ट्रिंग के अनुसार Mobi की सिफारिश की जाती है। लेकिन, कुछ पुराने टैबलेट केवल तभी वापस नहीं आते हैं जब केवल Mobi का उपयोग किया जाता है, इसलिए हमें Tablet स्ट्रिंग का भी उपयोग करना चाहिए।

इसी तरह, सुरक्षित प्रकार पर होने के लिए iPad और iPhone तारों का उपयोग डिवाइस प्रकार की जांच के लिए भी किया जा सकता है।

अधिकांश नए डिवाइस अकेले Mobi स्ट्रिंग के लिए true जाएंगे।

if (/Mobi|Tablet|iPad|iPhone/.test(navigator.userAgent)) {
    // do something
}

यदि आप Modernizr उपयोग करते हैं, तो पहले उल्लेख किए गए Modernizr.touch का उपयोग करना बहुत आसान है।

हालांकि, मैं केवल सुरक्षित होने के लिए Modernizr.touch और उपयोगकर्ता एजेंट परीक्षण के संयोजन का उपयोग करना पसंद करता हूं।

var deviceAgent = navigator.userAgent.toLowerCase();

var isTouchDevice = Modernizr.touch || 
(deviceAgent.match(/(iphone|ipod|ipad)/) ||
deviceAgent.match(/(android)/)  || 
deviceAgent.match(/(iemobile)/) || 
deviceAgent.match(/iphone/i) || 
deviceAgent.match(/ipad/i) || 
deviceAgent.match(/ipod/i) || 
deviceAgent.match(/blackberry/i) || 
deviceAgent.match(/bada/i));

if (isTouchDevice) {
        //Do something touchy
    } else {
        //Can't touch this
    }

यदि आप Modernizr का उपयोग नहीं करते हैं, तो आप ऊपर Modernizr.touch फ़ंक्शन को प्रतिस्थापित कर सकते हैं ('ontouchstart' in document.documentElement)

यह भी ध्यान रखें कि उपयोगकर्ता एजेंट iemobile परीक्षण आपको Windows Phone तुलना में iemobile माइक्रोसॉफ्ट मोबाइल उपकरणों की विस्तृत श्रृंखला देगा।

यह SO सवाल भी देखें


यदि आप छोटे डिस्प्ले के बारे में विशेष रूप से चिंतित नहीं हैं तो आप चौड़ाई / ऊंचाई का पता लगाने का उपयोग कर सकते हैं। तो इस तरह यदि चौड़ाई एक निश्चित आकार के नीचे है, तो मोबाइल साइट फेंक दी जाती है। यह सही तरीका नहीं हो सकता है, लेकिन यह शायद कई उपकरणों के लिए पता लगाने के लिए सबसे आसान होगा। आपको आईफोन 4 (बड़े रिज़ॉल्यूशन) के लिए एक विशिष्ट व्यक्ति डालना पड़ सकता है।


यहां एक ऐसा फ़ंक्शन है जिसका उपयोग आप एक वास्तविक / झूठी उत्तर प्राप्त करने के लिए कर सकते हैं कि आप मोबाइल ब्राउज़र पर चल रहे हैं या नहीं। हां, यह ब्राउज़र-स्नीफिंग है, लेकिन कभी-कभी यह वही है जो आपको चाहिए।

function is_mobile() {
    var agents = ['android', 'webos', 'iphone', 'ipad', 'blackberry'];
    for(i in agents) {
        if(navigator.userAgent.match('/'+agents[i]+'/i')) {
            return true;
        }
    }
    return false;
}

सभी उत्तर उपयोगकर्ता-एजेंट का उपयोग ब्राउज़र का पता लगाने के लिए करते हैं लेकिन उपयोगकर्ता-एजेंट के आधार पर डिवाइस का पता लगाने का बहुत अच्छा समाधान नहीं है, बेहतर डिवाइस जैसे टच डिवाइस (नए jQuery में वे $.browser हटाते हैं और इसके बजाय $.support उपयोग करते हैं) का पता लगाने के लिए बेहतर है।

मोबाइल का पता लगाने के लिए आप स्पर्श घटनाओं की जांच कर सकते हैं:

function is_touch_device() {
  return 'ontouchstart' in window // works on most browsers 
      || 'onmsgesturechange' in window; // works on ie10
}

जावास्क्रिप्ट का उपयोग कर 'टच स्क्रीन' डिवाइस का पता लगाने का सबसे अच्छा तरीका क्या है?


Great answer thanks. Small improvement to support Windows phone and Zune:

        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/) || 
             navigator.userAgent.match(/Windows Phone/i) || 
             navigator.userAgent.match(/ZuneWP7/i)
             ) {
                // some code
                self.location="top.htm";
               }

How about mobiledetect.net ?

Other solutions seem too basic. This is a lightweight PHP class. It uses the User-Agent string combined with specific HTTP headers to detect the mobile environment. You can also benefit from Mobile Detect by using any of the 3rd party plugins available for: WordPress, Drupal, Joomla, Magento, etc.


I tried some of the ways and then I decided to fill a list manually and do a simple JS check. And in the end the user has to confirm. Because some checks gave false positive or negative.

var isMobile = false;
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|Opera Mobile|Kindle|Windows Phone|PSP|AvantGo|Atomic Web Browser|Blazer|Chrome Mobile|Dolphin|Dolfin|Doris|GO Browser|Jasmine|MicroB|Mobile Firefox|Mobile Safari|Mobile Silk|Motorola Internet Browser|NetFront|NineSky|Nokia Web Browser|Obigo|Openwave Mobile Browser|Palm Pre web browser|Polaris|PS Vita browser|Puffin|QQbrowser|SEMC Browser|Skyfire|Tear|TeaShark|UC Browser|uZard Web|wOSBrowser|Yandex.Browser mobile/i.test(navigator.userAgent) && confirm('Are you on a mobile device?')) isMobile = true;

Now, if you want to use jQuery to set the CSS, you could do the following:

$(document).ready(function() {
  if (isMobile) $('link[type="text/css"]').attr('href', '/mobile.css');
});

Since the borders between mobile and fixed devices become fluent and mobile browers are already powerful, checking width and user confirmation will probably be the best for the future (assuming that width in some cases will still be important). Because touches are already converted into mouse-ups and downs.

And concerning the mobile movability, I suggest you to think about Yoav Barnea's idea :

if(typeof window.orientation !== 'undefined'){...}

Knowing that TouchEvent is only for mobile devices, Maybe the simplest way could be check if user device can support it:

function isMobile() {
  try { 
       document.createEvent("TouchEvent"); 
       return true; 
     }
  catch(e) { 
       return false; 
     }
}

User agent strings should not be trusted alone. Solution below will work in all situations.

function isMobile(a) {
  return (/(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|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)));
}

and call this function:

isMobile(navigator.userAgent || navigator.vendor || window.opera)

You can also detect it like below

$.isIPhone = function(){
    return ((navigator.platform.indexOf("iPhone") != -1) || (navigator.platform.indexOf("iPod") != -1));

};
$.isIPad = function (){
    return (navigator.platform.indexOf("iPad") != -1);
};
$.isAndroidMobile  = function(){
    var ua = navigator.userAgent.toLowerCase();
    return ua.indexOf("android") > -1 && ua.indexOf("mobile");
};
$.isAndroidTablet  = function(){
    var ua = navigator.userAgent.toLowerCase();
    return ua.indexOf("android") > -1 && !(ua.indexOf("mobile"));
};





browser-detection