ऑटो मोबाइल ब्राउज़र का पता लगाता है (उपयोगकर्ता-एजेंट के माध्यम से?) [बंद]


291

यदि कोई उपयोगकर्ता मेरी वेब साइट को मोबाइल वेब ब्राउज़र से देख रहा है तो मैं कैसे पता लगा सकता हूं ताकि मैं तब अपनी वेब साइट के उपयुक्त संस्करण का पता लगा सकूं और प्रदर्शित कर सकूं?


12
आईपैड की गिनती करता है? :)
सेवा अलेक्सेयेव

33
सेवा की टिप्पणी एक अच्छा सवाल पेश करती है। "मोबाइल" का आज वास्तव में क्या मतलब है? क्या यह एक "फीचर फोन" का उल्लेख करता है जिसमें एक ब्राउज़र है लेकिन एक से अधिक नहीं है? क्या यह पूर्ण विशेषताओं वाले स्मार्ट फोन को संदर्भित करता है जहां इनपुट विधि और डिस्प्ले रिज़ॉल्यूशन कारकों को सीमित कर रहे हैं? उन गोलियों के बारे में कैसे जिनके साथ बातचीत करना आसान है और उच्च रिज़ॉल्यूशन डिस्प्ले हैं? मीडिया केंद्रों जैसे उपकरणों के बारे में - वे लिविंगरूम को कभी नहीं छोड़ते हैं लेकिन उनकी समान सीमाएं हैं। काम पर एक दोस्त ने मुझे यह भेजा। मुझे यह बहुत ही आनंददायक लगा। slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu
spaaarky21

1
@ रिकी लेकिन आईपैड पर आप अभी भी फ़्लैश सामग्री प्रदर्शित नहीं कर सकते हैं या टिनिम्स जैसे जावास्क्रिप्ट-आधारित समृद्ध पाठ संपादक का उपयोग कर सकते हैं।
टीजे एलिस

1
आईपैड फ्लैश नहीं देख सकता है, लेकिन यह एक अलग विषय है, जैसे कि पता चलता है कि ब्राउज़र फ्लैश का समर्थन करता है।
शॉन

2
भविष्य से बस एक पोस्ट, लेकिन उनकी साइट के मोबाइल संस्करण की सेवा करने में रुचि रखने वाले किसी व्यक्ति को "उत्तरदायी डिजाइन" पर कुछ लेखों में रुचि हो सकती है।
वेल विक्टस

जवाबों:


91

हां, यूजर-एजेंट हेडर को पढ़कर ट्रिक करेगा।

कुछ कर रहे हैं सूचियों बाहर तो आप स्क्रैच से शुरू करने के लिए की जरूरत नहीं है जाना जाता है मोबाइल उपयोगकर्ता एजेंटों के वहाँ। जब मैंने किया था तो मुझे ज्ञात उपयोगकर्ता एजेंटों का एक डेटाबेस बनाना था और अज्ञात को संग्रहीत करना था क्योंकि वे संशोधन के लिए पहचाने जाते हैं और फिर मैन्युअल रूप से यह पता लगाते हैं कि वे क्या हैं। यह आखिरी बात कुछ मामलों में अधिक हो सकती है।

यदि आप इसे अपाचे स्तर पर करना चाहते हैं, तो आप एक स्क्रिप्ट बना सकते हैं जो समय-समय पर उपयोगकर्ता एजेंट की जाँच करने वाले नियमों को सेट करती है (या बस एक बार और नए उपयोगकर्ता एजेंटों के बारे में भूल जाती है, या महीने में एक बार, जो भी आपके मामले के अनुरूप है), जैसे

RewriteEngine On

RewriteCond %{HTTP_USER_AGENT} (OneMobileUserAgent|AnotherMobileUserAgent|...)
RewriteRule (.*) mobile/$1

जो, उदाहरण के लिए, http: //domain/index.html से http: //domain/mobile/index.html पर जाएगा।

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


3
क्या इसे वेब सर्वर लेयर (Apache) पर कुछ प्रकार के .htaccess कमांड के माध्यम से पूरा किया जा सकता है - बजाय PHP के साथ स्क्रिप्टिंग भाषा का उपयोग करने के बजाय?

उपयोगकर्ता-एजेंट द्वारा दस्तावेज़ रूट सेट करने के लिए कोई विचार
कार्सन

126

डिटेक्ट मोबाइल ब्राउज़र पर ओपन सोर्स स्क्रिप्ट हैं जो अपाचे, एएसपी, कोल्डफ्यूजन, जावास्क्रिप्ट और पीएचपी में ऐसा करते हैं।


5
@guitar यदि ऐसा है तो आपको अपने यूए में भेजना चाहिए।
एडम टटल

9
Bleh ... मैं वास्तव में इन समाधानों के "कोड गंध" को नापसंद करता हूं। 4-वर्ण उपसर्गों के एक समूह का उपयोग करके रेगेक्स का कोई सुराग नहीं है कि वे मूल रूप से कहां से आए थे ... कोई धन्यवाद नहीं।
वी आर ऑल मोनिका

2
यह एक knarly regex बयान है। मैं मानता हूं, इस पर कोड की गंध अच्छी नहीं है।
जैक कॉक्स

5
मैं बिना लाइसेंस के "ओपन सोर्स" समाधान की तरह नहीं हूं और अपडेट का कोई संकेत नहीं है।
एडुआर्डो

12
हालांकि इसके आसपास कोई रास्ता नहीं है। किसी भी स्तर पर किसी भी प्रकार का समाधान उपयोगकर्ता एजेंट पर एक रेगेक्स चेक करने जा रहा है।
काइल

33

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


3
यह एक बहुत अच्छा विचार है, मुझे लगता है कि यह एक सुंदर समाधान है।
मैक्सिम वीक्स्लर

3
+1 यह एक बहुत मीठे विचार जैसा लगता है, लेकिन क्या इससे खोज इंजन क्रॉलर प्रभावित होंगे?
मिकी जी

यह एक भ्रामक विचार है। जावास्क्रिप्ट ब्राउज़र को अक्षम करने वाले ब्राउज़र एक्सटेंशन डेस्कटॉप ब्राउज़र पर बहुत लोकप्रिय हैं, इसलिए यह मानते हुए कि कोई जावास्क्रिप्ट का मतलब नहीं है कि मोबाइल केवल सादा गलत है। विंडो / व्यूपोर्ट / स्क्रीन रिज़ॉल्यूशन का ब्राउज़र के आकार से कोई लेना-देना नहीं है, और यह मान लेना कि कम रिज़ॉल्यूशन इंगित करता है कि हैंडहेल्ड आकार आपके वेब ऐप को बदसूरत बना देगा और कई उपयोगकर्ताओं को निराश कर देगा। (उदाहरण के लिए: गैर-पूर्ण-स्क्रीन विंडो, बड़ी टैबलेट में डेस्कटॉप ब्राउज़र।)
21s :oɈ

31

यहाँ मैं इसे जावास्क्रिप्ट में कैसे करूँ:

function isMobile() {
  var index = navigator.appVersion.indexOf("Mobile");
  return (index > -1);
}

Www.tablemaker.net/test/mobile.html पर एक उदाहरण देखें जहां यह मोबाइल फोन पर फ़ॉन्ट आकार को बढ़ाता है


यदि आप अपने खातों को यहाँ देखना चाहते हैं: meta.stackexchange.com/questions/18232/…
ब्रैंडन

जब यह टैबलेट (जैसे iPad) की बात आती है तो यह काम नहीं करेगा
Si8

ओपेरा मोबाइल के कारण "मोबाइल" का उपयोग करें।
21

1
और आपको "ओपेरा मिनी" की आवश्यकता है क्योंकि यह उपयोगकर्ता एजेंट में "मोबाइल" का उपयोग नहीं करने वाले दुर्लभ ब्राउज़रों में से एक है।
21

17

मेरा पसंदीदा मोबाइल ब्राउज़र डिटेक्शन तंत्र WURFL है । यह अक्सर अद्यतन किया जाता है और यह हर प्रमुख प्रोग्रामिंग / भाषा मंच के साथ काम करता है।


यह अच्छा है, लेकिन बयान "हर प्रमुख प्रोग्रामिंग / भाषा मंच के साथ काम करता है" थोड़ा बोल्ड है।
काइल


यह अब केवल pesky AGPL लाइसेंस के तहत उपलब्ध है, जब तक आप इसे नहीं खरीदते। en.wikipedia.org/wiki/WURFL#License_update
MarkJ

17

क्या आपने css3 मीडिया प्रश्नों का उपयोग करने पर विचार किया है? ज्यादातर मामलों में आप साइट के एक अलग मोबाइल संस्करण को बनाने के लिए बिना लक्षित डिवाइस के लिए कुछ सीएसएस शैलियों को लागू कर सकते हैं।

@media screen and (max-width:1025px) {
   #content {
     width: 100%;
   }
}

आप जो भी चाहते हैं, उसकी चौड़ाई निर्धारित कर सकते हैं, लेकिन 1025 आईपैड लैंडस्केप दृश्य को पकड़ लेंगे।

आप निम्नलिखित मेटा टैग को अपने सिर से जोड़ना चाहेंगे:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

की जाँच करें इस लेख कुछ अच्छे उदाहरण के लिए HTML5 Rocks में अधिक


1
मुझे लगता है कि यह वास्तव में जाने का सबसे अच्छा तरीका है। उपयोगकर्ता एजेंट स्ट्रिंग्स को देखने वाली लिपियों को तारीख से बाहर निकलने के लिए किस्मत में है। उपलब्ध स्क्रीन अचल संपत्ति को देखते हुए नए उपकरणों की किसी भी चिंता के बिना उत्तरदायी डिजाइन का पता लगाने की अनुमति देता है।
एडम टटल ने

1
यह केवल क्लाइंट-साइड डिटेक्शन के लिए काम करता है। लेकिन अगर आप चाहते हैं कि आपका सर्वर पक्ष मोबाइल ग्राहकों के लिए अलग व्यवहार करे, तो आपको कुछ अन्य तकनीक का उपयोग करना होगा।
इगोर ब्रेजक

यह डेस्कटॉप ब्राउज़र के लिए बुरी तरह से विफल हो जाता है जो पूर्ण-स्क्रीन नहीं चल रहे हैं। यदि आप इसे वैसे भी करने का विकल्प चुनते हैं, तो कृपया स्क्रीन स्क्रीन को भारी फोंट और मार्जिन के साथ बर्बाद न करें, या ड्रॉप-डाउन मेनू के पीछे महत्वपूर्ण कार्यक्षमता / जानकारी छिपाएं। यह आपकी साइट / ऐप को बदसूरत बना देगा और आपके कुछ उपयोगकर्ताओं को निराश कर देगा।
s49oɈ

13

के लिए एंड्रॉयड, IPHONE, आईपैड, ब्लैकबेरी, पाम, Windows CE, पाम

 <script language="javascript"> <!--
     var mobile = (/iphone|ipad|ipod|android|blackberry|mini|windows\sce|palm/i.test(navigator.userAgent.toLowerCase()));
              if (mobile) {
                  alert("MOBILE DEVICE DETECTED");
                  document.write("<b>------------------------------------------<br>")
                  document.write("<b>" + navigator.userAgent + "<br>")
                  document.write("<b>------------------------------------------<br>")
                  var userAgent = navigator.userAgent.toLowerCase();
                  if ((userAgent.search("android") > -1) && (userAgent.search("mobile") > -1))
                         document.write("<b> ANDROID MOBILE <br>")
                   else if ((userAgent.search("android") > -1) && !(userAgent.search("mobile") > -1))
                       document.write("<b> ANDROID TABLET <br>")
                   else if ((userAgent.search("blackberry") > -1))
                       document.write("<b> BLACKBERRY DEVICE <br>")
                   else if ((userAgent.search("iphone") > -1))
                       document.write("<b> IPHONE DEVICE <br>")              
                   else if ((userAgent.search("ipod") > -1))
                       document.write("<b> IPOD DEVICE <br>")
               else if ((userAgent.search("ipad") > -1))
                       document.write("<b> IPAD DEVICE <br>")
                       else
                   document.write("<b> UNKNOWN DEVICE <br>")
              }
              else
                  alert("NO MOBILE DEVICE DETECTED"); //--> </script>

मुझे यह काफी मददगार लगा।
बोझाडोज़

आपको निश्चित रूप से सशर्त जांच करनी चाहिए जो आपके लिए यह सब संभाल लेगी! आप कस्टम परीक्षण जोड़ सकते हैं, उन्हें ऑब्जेक्ट परीक्षणों के माध्यम से ला सकते हैं और कॉलबैक कर सकते हैं। उन्होंने यह भी मिल गया है पूर्व बनाया की एक सीमा का परीक्षण करती उपलब्ध: conditionizr.com/detects
Halcyon991

Elenasys, उपयोगी उत्तर के लिए धन्यवाद। हालाँकि, मैं अपने db में किसी भी UA "विंडोज़ \ sce" का मिलान नहीं कर सकता।
नेफ्स्की 14

1
यह विंडोज़ फोन के लिए काम नहीं करता है।
जेवरे

धन्यवाद, लेकिन विंडोज फोन निर्दिष्ट नहीं किया गया था ...
जोर्जेस

6

मोबाइल डिवाइस ब्राउज़र फ़ाइल ASP.NET प्रोजेक्ट्स के लिए मोबाइल (और अन्य) ब्रॉवर्स का पता लगाने का एक शानदार तरीका है: http://mdbf.codeplex.com/


क्या मोबाइल डिवाइस ब्राउज़र अभी भी काम कर रहा है? ? मैं इसे ऑफ़लाइन होने के बारे में एक अंकन ... है कि वहाँ नोटिस
creativeedg10

5

आप मोबाइल क्लाइंट का पता लगा सकते हैं navigator.userAgent, और वैकल्पिक क्लाइंट स्क्रिप्ट का पता लगा सकते हैं जैसे कि:

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

         //write code for your mobile clients here.

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

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

    }
    else{
         // write code for your desktop clients here
    }

    });

अधिक प्रबंधनीय समाधान के लिए, आप सशर्त का उपयोग कर सकते हैं जो आपके लिए यह सब संभाल लेगा! आप कस्टम परीक्षण जोड़ सकते हैं, उन्हें ऑब्जेक्ट परीक्षणों के माध्यम से ला सकते हैं और कॉलबैक कर सकते हैं। उन्होंने यह भी मिल गया है पूर्व बनाया की एक सीमा का परीक्षण करती उपलब्ध: conditionizr.com/detects
Halcyon991

4

आप उपयोगकर्ता-एजेंट स्ट्रिंग की जांच कर सकते हैं। जावास्क्रिप्ट में, यह वास्तव में आसान है, यह सिर्फ नाविक वस्तु का एक गुण है।

var useragent = navigator.userAgent;

आप जांच सकते हैं कि क्या डिवाइस जेएस या आईफोन में जेएस जैसी किसी चीज के साथ है

var isIphone = !!agent.match(/iPhone/i),
    isBlackberry = !!agent.match(/blackberry/i);

अगर आईफोन सच है, तो आप एक आईफोन से साइट को एक्सेस कर रहे हैं, अगर आइलैकबैरीबेरी आप एक ब्लैकबेरी से साइट को एक्सेस कर रहे हैं।

आप परीक्षण करने के लिए फ़ायरफ़ॉक्स के लिए "UserAgent Switcher" प्लगइन का उपयोग कर सकते हैं।

यदि आप भी रुचि रखते हैं, तो यह मेरी स्क्रिप्ट "redirection_mobile.js" की जाँच करने के लायक हो सकता है यहाँ ggub पर होस्ट किया गया है https://github.com/sebarmeli/JS-Redirection-Mobile-Site और आप एक में अधिक विवरण पढ़ सकते हैं मेरा लेख यहाँ:

http://blog.sebarmeli.com/2010/11/02/how-to-redirect-your-site-to-a-mobile-version-through-javascript/


1
यहां .match का उपयोग करना गलत है, आप .test () का उपयोग करना चाहते हैं, जो बूलियन मान का मूल्यांकन करता है, यह .match () की तुलना में बहुत तेज़ है और किसी सरणी को वापस नहीं करता है। अपने userAgent परीक्षण के लिए अधिक प्रबंधनीय समाधान के लिए, आप सशर्त का उपयोग कर सकते हैं जो आपके लिए यह सब संभाल लेगा! आप कस्टम परीक्षण जोड़ सकते हैं, उन्हें ऑब्जेक्ट परीक्षणों के माध्यम से ला सकते हैं और कॉलबैक कर सकते हैं। उन्हें
प्रीमियर

4
protected void Page_Load(object sender, EventArgs e)
{
    if (Request.Browser.IsMobileDevice == true)
    {
        Response.Redirect("Mobile//home.aspx");
    }
}

यह उदाहरण asp.net में काम करता है


3

आपने यह नहीं कहा कि आप किस भाषा का उपयोग कर रहे हैं। यदि यह पर्ल है तो यह तुच्छ है:

use CGI::Info;

my $info = CGI::Info->new();

if($info->is_mobile()) {
   # Add mobile stuff
}

unless($info->is_mobile()) {
   # Don't do some things on a mobile
}

क्या मॉड्यूल उपयोग करने के लिए: neilb.org/reviews/user-agent.html
जोनास जी Drange

0

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


1
क्या यह वेब सर्वर लेयर (Apache) पर कुछ प्रकार के .htaccess कमांड के माध्यम से पूरा किया जा सकता है - बजाय PHP का उपयोग करने के?

0

मैंने इस डेमो को स्क्रिप्ट और उदाहरणों के साथ रखा:

http://www.mlynn.org/2010/06/mobile-device-detection-and-redirection-with-php/

यह उदाहरण उपयोगकर्ता एजेंट का पता लगाने के लिए php फ़ंक्शन का उपयोग करता है और उपयोगकर्ताओं को साइट के एक संस्करण के लिए वरीयता देने के लिए उपयोगकर्ताओं को अनुमति देने का अतिरिक्त लाभ प्रदान करता है जो आमतौर पर उनके ब्राउज़र या डिवाइस प्रकार के आधार पर डिफ़ॉल्ट नहीं होगा। यह कुकीज़ के साथ किया जाता है (जावास्क्रिप्ट के विपरीत सर्वर-साइड पर php का उपयोग करके बनाए रखा जाता है।)

उदाहरणों के लिए लेख में डाउनलोड लिंक देखें।

उम्मीद करता हु आपको आनंद मिला हो!


0

MobileESP में PHP, Java, APS.NET (C #), रूबी और जावास्क्रिप्ट हुक हैं। इसमें अपाचे 2 लाइसेंस भी है, इसलिए यह वाणिज्यिक उपयोग के लिए मुफ्त है। मेरे लिए मुख्य बात यह है कि यह केवल ब्राउज़र और प्लेटफ़ॉर्म की पहचान करता है न कि स्क्रीन के आकार और अन्य मैट्रिक्स की, जो इसे छोटा रखता है।


हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.