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

Question

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

JQuery $.browserफ़ंक्शन वह नहीं है जिसकी मुझे तलाश है।

Comments

विशेष रूप से मोबाइल उपकरणों के लिए एक मोबाइल URL प्रदान करें। यह है कि अधिकांश प्रमुख साइटें मोबाइल उपकरणों को कैसे संभालती हैं। M.google.com देखें ।

— meagar

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

— यी जियांग

उपयोगकर्ता एजेंट लगातार लक्ष्य को आगे बढ़ा रहे हैं, इस पोस्ट को पढ़ने वाले सभी को उपयोगकर्ता एजेंट को सूँघने से बहुत सावधान रहना चाहिए

— Rob

'मोबाइल' डिवाइस क्या है? क्या यह एक उपकरण है जो स्पर्श का समर्थन करता है (जिसमें क्रोम पिक्सेल और विंडोज 8 लैपटॉप चूहों के साथ शामिल हैं)? क्या यह एक छोटी स्क्रीन (रेटिना आईपैड के बारे में) वाला एक उपकरण है? क्या यह धीमा सीपीयू वाला एक उपकरण है? या धीमे इंटरनेट कनेक्शन वाला डिवाइस? इस सवाल का जवाब आप क्या करना चाहते हैं, इस पर निर्भर करता है। स्क्रीन रिज़ॉल्यूशन या टच को लक्षित करना आसान है। यदि आप कुछ उपकरणों के लिए छोटी सामग्री या कम गहन जेएस की सेवा करना चाहते हैं, तो कोई चांदी की गोली नहीं है। Window.navigator.connection के लिए परीक्षण करें और उपयोगकर्ता (जैसे बुरा, बुरा, बीमार) वापस सूँघें। मेरे 2 सेंट।

— डेविड गिलबर्टसन

@ कोल "कोल 9" जॉनसन मेरी बात बिल्कुल। 'मोबाइल' का इस्तेमाल टच, स्लो सीपीयू, स्लो नेटवर्क और स्मॉल स्क्रीन के लिए एक छाता शब्द के रूप में किया जाता है। लेकिन इनमें से कोई भी सही धारणा नहीं है। मेरा मानना ​​है कि व्यक्तिगत रूप से इन पर विचार करने से 'मोबाइल' के कुछ अस्पष्ट अवधारणा के लिए डिजाइन करने की तुलना में बेहतर उत्पाद होगा। इसलिए मैं उस सवाल को ओ.पी.

— डेविड गिल्बर्टन

Answer 1

संपादक का नोट: उपयोगकर्ता एजेंट का पता लगाना आधुनिक वेब ऐप्स के लिए अनुशंसित तकनीक नहीं है। इस तथ्य की पुष्टि के लिए इस उत्तर के नीचे टिप्पणी देखें। यह सुविधा का पता लगाने और / या मीडिया प्रश्नों का उपयोग करके अन्य उत्तरों में से एक का उपयोग करने का सुझाव दिया गया है।

---

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"

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

---

एक अधिक गहन संस्करण:

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;
}

Comments

उपयोगकर्ता एजेंट सूँघना एक बहुत ही अजीब पहचान तकनीक है, उपयोगकर्ता एजेंट तार एक निरंतर बढ़ते लक्ष्य हैं, उन्हें अकेले भरोसा नहीं किया जाना चाहिए। इस पद पर मतदान करने वाले लोगों को अधिक शोध करने पर विचार करना चाहिए।

— राब

उपयोगकर्ता एजेंट से बाहर सिर्फ विशिष्ट उपकरणों के लिए सूँघने के साथ समस्याओं में से एक यह है कि नए उपकरणों के सामने आने पर आपको अपनी पहचान को अपडेट करना याद रखना होगा। यह एक आदर्श समाधान नहीं है।

— आईसीकोडफॉर्फी

एंड्रॉइड पर डॉल्फिन ब्राउज़र उन तारों में से किसी को नहीं भेजता है!

— परेला

यदि आपका उपयोगकर्ता पर्याप्त रूप से चालाक है या डेवलपर उपयोगकर्ता एजेंट स्ट्रिंग को बदलने के लिए पर्याप्त गूंगा है, जो उनके बारे में परवाह करता है ...

— mattdlockyer

तो मोबाइल आप माउस के साथ एंड्रॉइड टीवी पर कैसे विचार करेंगे? मोबाइल एक विंडोज़ पीसी कैसे है जो दोहरी मोड में (कीबोर्ड के साथ, या टच स्क्रीन के रूप में) चल सकता है? यदि आपने iPad का आविष्कार करने से पहले ऐसा किया था, तो आपको इसे बाद में अपनी सभी साइटों पर जोड़ना होगा। अगला OS बाहर आ रहा है: Ubuntu Mobile, FirefoxOS, Tizen ....This.Is.A.Bad.Idea.

— फ्रांसेस्कोएम

Answer 2

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

CSS फ़ाइल में:

/* 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
    }
 });

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

उदाहरण के लिए, अपने मोबाइल संस्करण में मैं फेसबुक लाइक बॉक्स को सक्रिय नहीं करना चाहता, क्योंकि यह उन सभी प्रोफाइल छवियों और सामान को लोड करता है। और यह मोबाइल आगंतुकों के लिए अच्छा नहीं है। इसलिए, कंटेनर तत्व को छिपाने के अलावा, मैं इसे 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 द्वारा अद्यतन

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

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

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

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

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

Comments

क्या आपको इस काम के लिए DOM में # कुछ-तत्व ACTUALLY की आवश्यकता नहीं है?

— रिमीयर

-1 screen.widthसंपत्ति एक वैश्विक है। मनमाने ढंग से DOM में एक तत्व जोड़ने और CSS मीडिया क्वेरी में अनावश्यक रूप से लाने की कोई आवश्यकता नहीं है। साथ ही, यदि ब्राउज़र डेस्कटॉप पर है और उपयोगकर्ता विंडो को आकार देता है, $is_mobileतो अपडेट होने वाला नहीं है।

— नर्व

क्यों नहीं:if( screen.width <= 480 ) { // is mobile }

— andrrjones

@andrewrjones रेटिना डिवाइस widthविशेषता मान IIRC को दोगुना करते हैं । इसलिए, एक रेटिना iPhone एक होगा widthकी 640और की ऊंचाई 960चित्र में, और एक widthके 960और की ऊंचाई 640परिदृश्य में।

— कोल जॉनसन

आपने अभी-अभी पुनर्निमाण किया है window.matchMedia: developer.mozilla.org/en-US/docs/Web/API/Window.matchMedia

— पॉल आयरिश

Answer 3

मोज़िला के अनुसार - उपयोगकर्ता एजेंट का उपयोग करके ब्राउज़र का पता लगाना :

सारांश में, हम एक मोबाइल डिवाइस का पता लगाने के लिए उपयोगकर्ता एजेंट में कहीं भी स्ट्रिंग "मोबी" की तलाश करने की सलाह देते हैं।

ऐशे ही:

if (/Mobi/.test(navigator.userAgent)) {
    // mobile!
}

यह सभी आम मोबाइल ब्राउज़र उपयोगकर्ता एजेंटों से मेल खाएगा, जिसमें मोबाइल मोज़िला, सफारी, IE, ओपेरा, क्रोम, आदि शामिल हैं।

Android के लिए अद्यतन

एरिकएल Androidएक उपयोगकर्ता एजेंट के रूप में भी परीक्षण करने की सिफारिश करता है, क्योंकि टैबलेट के लिए क्रोम उपयोगकर्ता एजेंट स्ट्रिंग में "मोबी" (हालांकि फोन संस्करण नहीं हैं) शामिल नहीं हैं:

if (/Mobi|Android/i.test(navigator.userAgent)) {
    // mobile!
}

Comments

जवाब के लिए धन्यवाद! मैं /Mobi/i.test(navigator.userAgent)हालांकि, परीक्षण के रूप में पसंद करता हूं ( यह एक बूलियन देता है।

— अर्मिनरोस्कु

सैमसंग गैलेक्सी नोट 8 पर विरोधाभासी रूप से फायरफॉक्स मोबाइल मोबी को वापस नहीं करता है और परीक्षण गलत वापस आ जाएगा।

— आइरिन

लिंक किए गए लेख में उल्लेख किया गया है: यदि डिवाइस इतना बड़ा है कि इसे "मोबी" के साथ चिह्नित नहीं किया गया है, तो आपको अपने डेस्कटॉप साइट की सेवा करनी चाहिए (जो, एक सर्वोत्तम अभ्यास के रूप में, वैसे भी स्पर्श इनपुट का समर्थन करना चाहिए, क्योंकि अधिक डेस्कटॉप मशीनें टचस्क्रीन के साथ दिखाई दे रही हैं)।

— क्वासरॉन्की

यह अन्य सुझाए गए समाधानों की तुलना में बहुत बेहतर है, यह स्वीकृत उत्तर imo होना चाहिए

— RNobel

Derp। धन्यवाद। मैं अपनी पिछली पोस्ट को संपादित नहीं कर सका। यहाँ यह फिर से है:/Mobi/i.test(navigator.userAgent) || /Android/i.test(navigator.userAgent)

— एरिकएल

Answer 4

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

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

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

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

Comments

टच स्क्रीन वाले विंडोज लैपटॉप के बारे में क्या?

— क्रिस सिनेली

दूसरा isMobileफंक्शन आपने trueमेरे डेस्टॉप डिवाइस पर रिटर्न प्रदान किया !! (गूगल क्रोम v44.0)

— ल्यूक

यह वास्तव में मोबाइल का पता नहीं लगाने के लिए एक isTouchSupported विधि का अधिक है।

— बरकर्मन 01

सभी मोबाइल फोन में टच स्क्रीन नहीं होती है।

— एंड्रयू

@LukeP क्या आप मोबाइल के एमुलेशन से डेस्कटॉप पर जा रहे हैं?

— क्रिश्चियन

Answer 5

मोबाइल डिवाइस का पता लगाने के लिए आप जो कुछ भी कर रहे हैं, वह "ब्राउज़र सूँघने" की अवधारणा IMO से बहुत कम हो रहा है। यह संभव है कि कुछ फीचर का पता लगाना बेहतर होगा। Http://www.modernizr.com/ जैसी लाइब्रेरी इसमें मदद कर सकती हैं।

उदाहरण के लिए, मोबाइल और गैर-मोबाइल के बीच की रेखा कहां है? यह हर दिन अधिक से अधिक धुंधला हो जाता है।

Comments

फिर भी, एक उपयोगकर्ता उन उपकरणों के लिए "jquery मोबाइल" का उपयोग करना चाह सकता है, जो भी समर्थित सुविधाएँ हैं।

— सिरबर

उदाहरण के लिए, "मोबाइल" "नॉन-मोबाइल" के साथ मेरा मुद्दा मेरी रोलओवर विशेषताएं हैं, मैंने जेएस को सुविधाओं को बंद करने के लिए स्थापित किया है, बस पता लगाने की आवश्यकता है

— सैम सूसमैन

फिर भी, यदि आप एक डिवाइस-विशिष्ट डाउनलोड करने योग्य ऐप पेश करना चाहते हैं तो यह उपयोगी हो सकता है।

— बस्ते

यह स्थिति पर निर्भर करता है, मैं ऐसी चीज की तलाश कर रहा हूं जो मुझे बताएगी कि क्या उपयोगकर्ता मोबाइल डिवाइस पर है, ताकि मैं कुछ भारी जावास्क्रिप्ट आधारित एनिमेशन को निष्क्रिय कर सकूं। उपयोगकर्ता के ब्राउज़र की जावास्क्रिप्ट प्रदर्शन क्षमताओं का 'पता लगाने' की कोशिश करने की तुलना में UA सूँघना अधिक उपयुक्त होगा।

— रिक सग्स

मोबाइल बनाम गैर-मोबाइल एक बहुत बड़ा अंतर है, बस "फीचर डिटेक्शन" का उपयोग करना बेवकूफी है जब आप मोबाइल / डेस्कटॉप अनुभव के लिए इंटरैक्शन / यूआई को पूरा करने की कोशिश कर रहे हैं। व्यक्तिगत रूप से, मैं चाहता हूं कि ओएस प्राप्त करने के लिए एक आसान (और विश्वसनीय) तरीका था कि वर्तमान ब्राउज़र चल रहा है

— nbsp

Answer 6

यह jQuery नहीं है, लेकिन मुझे यह मिला: http://detectmobilebrowser.com/

यह कई भाषाओं में मोबाइल ब्राउज़र का पता लगाने के लिए स्क्रिप्ट प्रदान करता है, जिनमें से एक जावास्क्रिप्ट है। आप जो खोज रहे हैं, उससे आपको मदद मिल सकती है।

हालाँकि, जब से आप jQuery का उपयोग कर रहे हैं, आप jQuery.support संग्रह से अवगत होना चाह सकते हैं। यह वर्तमान ब्राउज़र की क्षमताओं का पता लगाने के लिए गुणों का एक संग्रह है। प्रलेखन यहाँ है: http://api.jquery.com/jQuery.support/

चूंकि मुझे नहीं पता कि आप क्या हासिल करने की कोशिश कर रहे हैं, मुझे नहीं पता कि इनमें से कौन सबसे उपयोगी होगा।

यह सब कहा जा रहा है, मुझे लगता है कि आपका सबसे अच्छा शर्त या तो रीडायरेक्ट करना है या सर्वर-साइड भाषा (यदि यह एक विकल्प है) का उपयोग करके आउटपुट के लिए एक अलग स्क्रिप्ट लिखना है। चूंकि आप वास्तव में एक मोबाइल ब्राउज़र एक्स की क्षमताओं को नहीं जानते हैं, इसलिए सर्वर साइड पर डिटेक्शन और परिवर्तन तर्क करना सबसे विश्वसनीय तरीका होगा। बेशक, अगर आप सर्वर साइड भाषा का उपयोग नहीं कर सकते हैं तो यह सब एक मुद बिंदु है :)

Comments

कि iPads का समर्थन नहीं करता है। IPad का समर्थन करने के लिए, ip (hone | od) और "| ad" - जैसे ip (hone | od | ad) देखें

— Jayson Ragasa

मैंने अभी-अभी detectmobilebrowser.com/ से जावास्क्रिप्ट की कोशिश की, और यह iPad के लिए काम नहीं कर रहा है।

— मिल्के पैटरन

@MilchePatern ऐसा इसलिए है क्योंकि स्क्रिप्ट दोषपूर्ण है, iPad के बजाय iPad का उपयोग करें, तो यह काम करता है, मुझे अपने सैमसंग टैब पर समस्या थी, एंड्रॉइड आइसो एंड्रॉइड का उपयोग करना पड़ा :)

— कोएन डेमन

वहाँ एक jQuery का संस्करण है, और यह पूरी तरह से काम करता है, लेकिन गोली का पता लगाने के लिए आप के |android|ipad|playbook|silkरूप में अनुभाग (यह डिजाइन द्वारा) में वर्णित के रूप में जोड़ना चाहिए

— cprcrack

खैर, एक गोली एक मोबाइल नहीं है। साइट को dectect mobile browser कहा जाता है।

— फेलिक्स ईव

Answer 7

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

यहाँ प्रत्येक डिवाइस प्रकार के लिए एक अलग वर्ग प्रदर्शित करने के लिए 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/

Comments

यह बहुत अच्छा काम करता है। मुझे एक jQuery फ़ंक्शन को अक्षम करने की आवश्यकता थी जो आईपैड या एंड्रॉइड फोन का उपयोग करते समय स्क्रॉलिंग पर चलता है और चूंकि विभिन्न उपकरणों में स्क्रीन चौड़ाई भिन्न होती है, यह एक सरल समाधान था। अनेक अनेक धन्यवाद।

— एरिक एलेन

एंड्रॉइड के परीक्षण का उपयोग करने के साथ एकमात्र समस्या यह है कि एंड्रॉइड उपयोगकर्ता एजेंट का उपयोग करने वाले नुक्कड़ के बारे में क्या है

— मेयरमोनी

अच्छा जवाब जो दिखाता है कि हमें फीचर का पता लगाने वाले कट्टरपंथी नहीं हैं।

— फर्नांडो

Answer 8

इसमें एक समाधान मिला: 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...
}

Comments

उपयोगकर्ता एजेंट पर आधारित एक समाधान अच्छी तरह से काम करता है जब आप आश्वस्त हो सकते हैं कि उप स्ट्रिंग सीधे डिवाइस के प्रकार से संबंधित है। आईपैड = आईपैड। हालाँकि अब बहुत सारे विभिन्न प्रकार के उपकरण (25,000 से अधिक) हैं जो कि अधिकांश व्यावसायिक उद्देश्यों के लिए दृष्टिकोण पर्याप्त नहीं है। मैंने एक विश्वसनीय और मजबूत विकल्प प्रदान करने के लिए ओपन सोर्स प्रोजेक्ट 51Degrees.com की स्थापना की । यह जावास्क्रिप्ट और सर्वर साइड में भी काम करेगा। सभी दस्तावेज यहाँ है ... 51degrees.com/support/documentation

— जेम्स

मैंने अस्वेल के ऊपर इस्तेमाल किया, और यह मेरे लिए अच्छा काम कर रहा था, लेकिन अब इसके एंड्रॉइड 5.1 और इसके बाद के संस्करण के लिए काम नहीं कर रहा है, क्या एंड्रॉइड 5.1 और अधिक से अधिक में कुछ भी बदल गया है?

— इमरान क़मर

if (isMobile.Android ()) {document.getElementById ("myAnchor")। setAttribute ("href", " google.com" ); }

— अमरानुर रहमान

Answer 9

यदि "मोबाइल" से आपका मतलब है "छोटी स्क्रीन," मैं इसका उपयोग करता हूं:

var windowWidth = window.screen.width < window.outerWidth ?
                  window.screen.width : window.outerWidth;
var mobile = windowWidth < 500;

IPhone पर आप एक विंडो के साथ समाप्त करेंगे। 320. उपलब्धता। Android पर आप 480 के एक window.outerWidth के साथ समाप्त करेंगे (हालांकि यह एंड्रॉइड पर निर्भर कर सकता है)। आईपैड और एंड्रॉइड टैबलेट्स 768 की तरह नंबर लौटाएंगे, जिससे उन्हें पूरा व्यू मिलेगा जैसे आप चाहते हैं।

Comments

पर्याप्त 'window.screen.width' क्यों नहीं है? ऐसा लगता है कि आप 'window.screen. उपलब्धता' या 'window.outerWidth' में से किसी एक को ले रहे हैं। आप 'आउटरविदथ' की परवाह क्यों करते हैं? उत्तर के लिए अग्रिम धन्यवाद!

— user1330974

Answer 10

यदि आप मॉडर्निज़्र का उपयोग करते हैं , तो 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आपको पता चला Microsoft मोबाइल उपकरणों की व्यापक रेंज मिल जाएगी Windows Phone।

इस SO प्रश्न को भी देखें

Comments

और डार्ट में समान TouchEvent.supported:।

— काई सेलग्रैन

('ontouchstart' in window)भी एक विकल्प Modernizr.touchहै, hacks.mozilla.org/2013/04/…

— JVE999

मुझे लगता है कि आधुनिकीकरण एक महान समाधान है!

— बॉबी रसेल

आपको वास्तव |में कई मैचों के बजाय RegEx का उपयोग करना चाहिए । आपको संशोधक की आवश्यकता toLowerCase()इसलिए भी नहीं है i। यहाँ: var isTouchDevice = Modernizr.touch || /iphone|ipod|ipad|android|iemobile|iphone|ipad|ipod|blackberry|bada/i.test(navigator.userAgent);

— oriadam 17

Answer 11

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

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");
}

Comments

कई मोबाइलों की चौड़ाई, 1000 है, विशेष रूप से लैंडस्केप मोड पर

— १am

Answer 12

मुझे पता है कि इस प्रश्न के बहुत सारे उत्तर हैं, लेकिन मैंने देखा कि कोई भी इस तरीके से उत्तर के करीब नहीं पहुंचता है।

सीएसएस चौड़ाई (मीडिया क्वेरी) का उपयोग यह निर्धारित करने के लिए करता है कि चौड़ाई पर आधारित वेब दस्तावेज़ पर कौन सी शैलियों को लागू किया गया है। जावास्क्रिप्ट में चौड़ाई का उपयोग क्यों नहीं करते?

उदाहरण के लिए बूटस्ट्रैप (मोबाइल पहले) मीडिया क्वेरी में 4 स्नैप / ब्रेक पॉइंट मौजूद हैं:

• अतिरिक्त छोटे उपकरण 768 पिक्सेल और इससे कम के हैं।
• छोटे उपकरण 768 से 991 पिक्सेल तक के होते हैं।
• मध्यम उपकरण 992 से 1199 पिक्सेल तक होते हैं।
• बड़े उपकरण 1200 पिक्सेल और ऊपर के होते हैं।

हम अपने जावास्क्रिप्ट मुद्दे को हल करने के लिए भी इसका उपयोग कर सकते हैं।

सबसे पहले हम एक फंक्शन बनाएंगे जो विंडो साइज़ को प्राप्त करता है और एक वैल्यू देता है जो हमें यह देखने की अनुमति देता है कि कौन सा साइज़ डिवाइस हमारे एप्लीकेशन को देख रहा है:

var getBrowserWidth = function(){
    if(window.innerWidth < 768){
        // Extra Small Device
        return "xs";
    } else if(window.innerWidth < 991){
        // Small Device
        return "sm"
    } else if(window.innerWidth < 1199){
        // Medium Device
        return "md"
    } else {
        // Large Device
        return "lg"
    }
};

अब जब हमारे पास फंक्शन सेट है, हम इसे ans store मान मान सकते हैं:

var device = getBrowserWidth();

आपका सवाल था

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

अब जब हमारे पास डिवाइस की सभी जानकारी शेष है, तो एक if स्टेटमेंट है:

if(device === "xs"){
  // Enter your script for handheld devices here 
}

यहाँ CodePen पर एक उदाहरण दिया गया है: http://codepen.io/jacob-king/pen/jWEeWG

Comments

इसने मेरे लिए सबसे अच्छा काम किया। चूंकि मैं कुछ मोबाइल फॉरवर्ड पेजों के लिए बूटस्ट्रैप का उपयोग कर रहा था, इसलिए इस तकनीक ने एक गैर-मोबाइल फ़ॉरवर्ड (गैर-बूटस्ट्रैप) से बूटस्ट्रैप पृष्ठ पर ऑटो रीडायरेक्ट करने के लिए अच्छी तरह से काम किया। युक्ति: मुझे IE11 F12 टूल में एक छोटी समस्या मिली: मैंने मोबाइल डिवाइस के लिए F12 देव टूल्स में एमुलेशन को चालू किया था और इससे विंडो साइज का पता लगाने में परेशानी हुई। मैंने इसे xs ब्रेक पॉइंट के नीचे फिर से आकार दिया था, लेकिन इसे md के रूप में पहचान रहा था। जैसे ही मैंने फोन का अनुकरण करना बंद कर दिया और पृष्ठ को रीफ्रेश किया, उसने सही तरीके से आकार का पता लगा लिया और मेरे कोड में मैं बूटस्ट्रैप पेज पर वापस भेज दिया।

— जेफ मर्गलर

यही कारण है कि मैं थोड़ी देर के लिए देख रहा था। धन्यवाद!

— डेवलपर

@JacobKing आपने कहा कि Small Devices range from 768 to 991 pixels.इसका मतलब यह होना चाहिए window.innerWidth < 992(991 शामिल है) 1199 के लिए एक ही बात यह होनी चाहिए <1200 इसके बजाय

— medBouzid

Answer 13

जावास्क्रिप्ट की एक पंक्ति में:

var isMobile = ('ontouchstart' in document.documentElement && navigator.userAgent.match(/Mobi/));

यदि उपयोगकर्ता एजेंट में 'Mobi' (MDN के अनुसार) और ontouchstart उपलब्ध है, तो यह एक मोबाइल डिवाइस होने की संभावना है।

Comments

था /Mobi/.test(navigator.userAgent)... matchयह मेरे लिए नहीं किया

— BananaAcid

Answer 14

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

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

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

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

Comments

मेरे लिए यह काम कर रहा था, क्या आप अधिक विशिष्ट हो सकते हैं कि आप किस कोड का उपयोग करते हैं और एक मुद्दा कहां लगता है?

— मक्सिम लुज़िक

वह पृष्ठ प्रतिक्रिया है, अन्य सभी प्रतिक्रियाओं में उस पृष्ठ का कॉपी पेस्ट है

— Rubén Ruíz

Answer 15

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

Answer 16

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

यह बहुत सरल है। यहाँ समारोह है:

// 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;
}

Comments

लोकलस्टोरेज पर आधारित आपकी धारणा काफी दिलचस्प है, क्या आप समर्थित डिवाइस या ब्राउज़र की एक सीमा प्रदान कर सकते हैं जो आपकी स्क्रिप्ट से सही रूप से मेल खाते हैं? मैं इस सवाल का हल ढूंढने में रुचि रखता हूं, और मैंने मोबाइल-टैबलेट ब्राउज़रों का पता लगाने की कोशिश की, वास्तव में एक दिलचस्प हल हो सकता है

— ग्रबेर

Answer 17

अगर पाया गया कि सिर्फ जाँच navigator.userAgentकरना हमेशा विश्वसनीय नहीं होता है। जाँच करके भी अधिक विश्वसनीयता प्राप्त की जा सकती है navigator.platform। पिछले उत्तर के लिए एक सरल संशोधन बेहतर काम करता है:

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

Comments

एक टिप्पणी छोड़ने के बिना एक जवाब को नीचा दिखाने की अनुमति नहीं दी जानी चाहिए। सबसे अच्छा, यह अशिष्ट है।

— मार्क

Answer 18

मैं आपको http://wurfl.io/ की जांच करने की सलाह देता हूं

संक्षेप में, यदि आप एक छोटी जावास्क्रिप्ट फ़ाइल आयात करते हैं:

<script type='text/javascript' src="//wurfl.io/wurfl.js"></script>

आपको एक JSON ऑब्जेक्ट के साथ छोड़ दिया जाएगा जो दिखता है:

{
 "complete_device_name":"Google Nexus 7",
 "is_mobile":true,
 "form_factor":"Tablet"
}

(यह मानकर कि आप एक नेक्सस 7 का उपयोग कर रहे हैं, निश्चित रूप से) और आप ऐसा करने में सक्षम होंगे:

if(WURFL.is_mobile) {
    //dostuff();
}

यह वही है जो आप ढूंढ रहे हैं।

अस्वीकरण: मैं उस कंपनी के लिए काम करता हूं जो यह मुफ्त सेवा प्रदान करती है।

Comments

Wurfl नेक्सस 7 और आईपैड मिनी का पता लगाने में विफल रहा!

— जैकब

Nexus 7 के बारे में कुछ सही नहीं है। क्या आप सुनिश्चित हैं कि आपके पास सेटिंग्स में UA स्ट्रिंग का नेक्सस स्पूफ नहीं था? जहाँ तक iPad मिनी का सवाल है, हाँ, यह दूसरे iPad से अलग करना बहुत मुश्किल है, लेकिन इसे अभी भी iPad के रूप में पहचाना गया है, है ना? क्या यह है कि आप मेरी पोस्ट को नीचे कर दिया है?

— लुका पासानी

नहीं, आईपैड मिनी को डेस्कटॉप डिवाइस के रूप में पाया गया था

— याकूब

Answer 19

इस पोस्ट को देखें , यह वास्तव में एक अच्छा कोड स्निपेट देता है कि टच डिवाइस का पता लगाने पर क्या किया जाए या टचस्टार्ट इवेंट को क्या कहा जाए:

$(function(){
  if(window.Touch) {
    touch_detect.auto_detected();
  } else {
    document.ontouchstart = touch_detect.surface;
  }
}); // End loaded jQuery
var touch_detect = {
  auto_detected: function(event){
    /* add everything you want to do onLoad here (eg. activating hover controls) */
    alert('this was auto detected');
    activateTouchArea();
  },
  surface: function(event){
    /* add everything you want to do ontouchstart here (eg. drag & drop) - you can fire this in both places */
    alert('this was detected by touching');
    activateTouchArea();
  }
}; // touch_detect
function activateTouchArea(){
  /* make sure our screen doesn't scroll when we move the "touchable area" */
  var element = document.getElementById('element_id');
  element.addEventListener("touchstart", touchStart, false);
}
function touchStart(event) {
  /* modularize preventing the default behavior so we can use it again */
  event.preventDefault();
}

Comments

'ontouchstart' in document.documentElementशायद स्पर्श समर्थन के लिए एक बेहतर परीक्षा है window.Touch। इससे भी बेहतर, Modernizr.js ( modernizr.com ) का उपयोग करें क्योंकि स्पर्श का पता लगाने की कोशिश में बहुत सारे विचार खर्च किए गए हैं। यदि आप विकास कोड देखते हैं और "स्पर्श" पर खोज करते हैं तो आप उनके टच डिटेक्शन कोड को modernizr.com/downloads/modernizr.js में देख सकते हैं ।

— रोबोकट

टच डिटेक्शन ने मुझे परेशानी में डाल दिया है, क्योंकि कुछ नए विंडोज 8 लैपटॉप क्रोम में टचस्क्रीन के रूप में पता लगाते हैं, जिससे अजीब परिणाम सामने आते हैं।

— जॉर्नर

Answer 20

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

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;
}

Comments

यह कई मोबाइल ब्राउज़रों का पता लगाने में विफल होगा, विशेष रूप से मोबाइल क्रोम। यह शायद कुछ पर भी विफल हो जाएगा: ओपेरा मोबाइल, फ़ायरफ़ॉक्स मोबाइल, ओपेरा मिनी, विभिन्न लोकप्रिय चीनी मोबाइल ब्राउज़र, आदि आदि

— रोबोकैट

इसके लिए आपको जरूरत नहीं है for! + आप एक RegExp बनाना भूल गए। यहाँ एक सरल है:return !!navigator.userAgent.match(new RegExp(agents.join('|'),'i'))

— oriadam 17

Answer 21

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

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

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

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

Comments

दुर्भाग्य से, यह विश्वसनीय नहीं है और वैसे भी यह trueटचस्क्रीन के साथ डेस्कटॉप पीसी पर लौटता है । stucox.com/blog/you-cant-detect-a-touchscreen

— जस्टअमार्टिन

टचस्क्रीन और पूर्ण ब्राउज़र अनुभव वाले लैपटॉप को न भूलें। :-)

— माइक कॉर्मेंडी

यह जांचने का तरीका नहीं हो सकता है कि यह एक मोबाइल-डिवाइस है या नहीं, लेकिन जैसा कि आपके फ़ंक्शन का नाम बताता है कि यह टच-सक्षम डिवाइसों की जांच करने के लिए एकदम सही है। +1 मुझ से ;-)

— कथारा

Answer 22

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

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

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

अधिकांश नए उपकरण अकेले स्ट्रिंग के trueलिए लौटेंगे Mobi।

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

Comments

मुझे टैबलेट पर काम करने के लिए वहां "एंड्रॉइड" जोड़ना था। मुझे ट्विस्ट करना पड़ेगा लेकिन मुझे अप्रोच पसंद है।

— एंडी

Answer 23

आप इसे आसानी से संभालने में सक्षम होने के लिए मीडिया क्वेरी का उपयोग कर सकते हैं।

isMobile = function(){
    var isMobile = window.matchMedia("only screen and (max-width: 760px)");
    return isMobile.matches ? true : false
}

Comments

मुझे यह दृष्टिकोण पसंद है, मैं window.matchMedia("(pointer:coarse)").matches;एक अलग उत्तर से उठा ।

— जेसन लिडन

Answer 24

शानदार जवाब धन्यवाद। Windows फोन और 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";
}

Comments

मैं कहूंगा कि यह सबसे सरल (शायद सबसे अच्छा नहीं) फिक्स है अगर आप मोबाइल उपकरणों के लिए हॉवर / ड्रैगिंग घटनाओं को संभालने की कोशिश कर रहे हैं। मैं कुछ इस तरह का उपयोग करता हूँ एक ".मोबाइल" बूलियन बनाने के लिए जिसे बाद में हर होवर / माउसओवर इवेंट के लिए चेक किया जाता है। मेरे दो सेंट, वैसे भी। अधिक जेएस पुस्तकालयों या कोड को जोड़ने के लिए उपयोगकर्ता इंटरैक्शन की आवश्यकता होती है जो मेरे लिए बहुत ज्यादा मायने नहीं रखता है; अगर मैं गलत हूं तो मुझे सुधारो।

— मीनमेट

चूंकि आप नियमित अभिव्यक्तियों का उपयोग कर रहे हैं, वास्तव में उनका उपयोग करें:if (navigator.userAgent.match(/Android|webOS|iPhone|iPad|etc/)){self.location = "top.htm"}

— foobarbecue

Answer 25

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

/**  * 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);

तो इस का उपयोग करें:

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

Answer 26

Http://detectmobilebrowser.com/ पर आधारित सरल कार्य

function isMobile() {
    var a = navigator.userAgent||navigator.vendor||window.opera;
    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|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));
}

Answer 27

<script>
  function checkIsMobile(){
      if(navigator.userAgent.indexOf("Mobile") > 0){
        return true;
      }else{
        return false;
      }
   }
</script>

यदि आपको कोई भी ब्राउज़र मिला है और यदि आप navigator.userAgent प्राप्त करने का प्रयास करते हैं, तो हमें ब्राउज़र की जानकारी कुछ इस प्रकार मिलेगी

मोज़िला / 5.0 (Macintosh; Intel Mac OS X 10_13_1) AppleWebKit / 537.36 (KHTML, जैसे गेको) Chrome / 64.0.3282.186 सफारी / 537.36

यदि आप मोबाइल में काम करते हैं तो यही बात आप को बताई जाएगी

मोज़िला / 5.0 (लिनक्स; Android 8.1.0; पिक्सेल बिल्ड / OPP6.171019.012) AppleWebKit / 537.36 (KHTML, गेको की तरह) क्रोम / 61.0.3163.98 मोबाइल सफारी / 537.36

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

Answer 28

मैं इसका उपयोग करता हूं

if(navigator.userAgent.search("mobile")>0 ){
         do something here
}

Answer 29

कैसे mobiledetect.net के बारे में ?

अन्य समाधान भी बुनियादी लगते हैं। यह एक हल्का PHP वर्ग है। यह मोबाइल वातावरण का पता लगाने के लिए विशिष्ट HTTP हेडर के साथ संयुक्त उपयोगकर्ता-एजेंट स्ट्रिंग का उपयोग करता है। WordPress, Drupal, Joomla, Magento, आदि: के लिए उपलब्ध किसी भी 3 पार्टी प्लगइन्स का उपयोग करके आप मोबाइल डिटेक्ट से भी लाभ उठा सकते हैं।

Comments

क्योंकि jQuery के लिए पूछा गया प्रश्न?

— क्रेसरजैक

Answer 30

उपयोगकर्ता एजेंट स्ट्रिंग्स पर अकेले भरोसा नहीं किया जाना चाहिए। नीचे दिए गए समाधान सभी स्थितियों में काम करेंगे।

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)));
}

और इस फ़ंक्शन को कॉल करें:

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