जावास्क्रिप्ट

Question

का उपयोग कर रहा है, तो अंत उपयोगकर्ता एक फोन, एक गोली या एक पीसी

मैं थोड़ी देर के लिए Googling दिया है पर है पता लगाने के लिए कोशिश कर रहा हूँ पता लगाने फ़ोन/टेबलेट/वेब ग्राहक, जाहिरा तौर पर वहाँ कोई आसान समाधान कर रहे हैं।

मुझे लगता है कि मुझे संकल्प का उपयोग नहीं करना चाहिए, क्योंकि आजकल कुछ टैबलेट में अद्भुत संकल्प हैं।

मुझे अभिविन्यास पर भरोसा नहीं करना चाहिए, क्योंकि windows8 लैपटॉप बस टैबलेट की तरह घुमा सकते हैं। (और उत्तरदायी डिज़ाइन मेरे वर्तमान प्रोजेक्ट के लिए बहुत मुश्किल है)

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

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


if(/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)) { 
       return true; 
      } 

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) 
       || navigator.userAgent.match(/bada/i) 
       || navigator.userAgent.match(/Bada/i) 
       ){ 
       return true; 
      } 

Answer 1

हां, आपको संकल्प या अभिविन्यास पर भरोसा नहीं करना चाहिए। लेकिन एम-आधारित मीडिया प्रश्नों के बारे में कैसे?

आदेश जावास्क्रिप्ट के साथ अपने मीडिया क्वेरी के परिणामों को पढ़ने के लिए, आप अपने पृष्ठ के लिए अदृश्य सामग्री जोड़ने के लिए अपने सीएसएस करने के लिए एक मीडिया क्वेरी जोड़ने की कोशिश कर सकते हैं:

@media all and (max-width: 45em) { 
    body:after { 
     content: 'smallscreen'; 
     display: none; 
    } 
} 

फिर जावास्क्रिप्ट के माध्यम से सामग्री को पढ़ने:

var size = window.getComputedStyle(document.body,':after').getPropertyValue('content'); 

फिर निर्धारित क्या आप लोड करना चाहते हैं:

if (size.indexOf('smallscreen') !=-1) { 
    // Load some content for smaller screens. 
} 

Answer 2

उपयोगकर्ता एजेंटों सुंदर अविश्वसनीय हैं, और वास्तव में ग्राहकों द्वारा नाटक किया जा सकता है। मैं विशिष्ट उपकरणों की बजाय विशिष्ट कार्यक्षमता पर ध्यान केंद्रित करने की सिफारिश करता हूं। Modernizer एक लाइब्रेरी है जिसका उपयोग यह पता लगाने के लिए किया जा सकता है कि क्लाइंट डिवाइस पर सुविधाएं उपलब्ध हैं या नहीं। यह आपको यह पता लगाने की अनुमति देगा कि स्थानीय भंडारण जैसी चीजें उपलब्ध हैं या नहीं। यदि आप डिवाइस/क्लाइंट विशिष्ट विशेषताओं के बजाय Responsive Web Design जैसे कुछ में रूचि रखते हैं, तो आप ट्विटर की Bootstrap जैसी लाइब्रेरी का उपयोग कर सकते हैं। मचान पृष्ठ के निचले हिस्से में, इसमें कुछ विशेषताएं भी हैं जो फोन बनाम टैबलेट बनाम डेस्कटॉप का पता लगाने में सक्षम बनाती हैं, हालांकि मुझे विश्वास है कि यह संकल्प पर आधारित है।

--Edit add-- को

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

Answer 3

मैं मीडिया प्रश्नों और <viewport> टैग को देखने की अनुशंसा करता हूं।

उत्तरदायी डिजाइन के पीछे विचार प्रक्रियाओं पर कुछ उत्कृष्ट लेख।

http://www.html5rocks.com/en/mobile/mobifying/

http://www.magazine.org/timecom-gm-craig-ettinger-bringing-responsive-web-design-iconic-brand

प्रश्न बना रहता है, क्या आप को पूरा करने के प्रयास कर रहे हैं?

Answer 4

त्वरित उत्तर क्यों एजेंट का मिलान दिए गए सूची के खिलाफ काम नहीं करता है: "एंड्रॉइड" लौटा (एजेंट) स्ट्रिंग में नहीं है! बस मान लें कि दिए गए तारों में से कोई भी सही नहीं है और झूठ बोलने वाला है।

मैंने एंड्रॉइड मामले को साबित करने वाले परीक्षण कोड पोस्ट किए हैं।