उत्तरदायी वेब डिज़ाइन बनाम उपयोगकर्ता-एजेंट सूँघना

CSS3 mediaक्वेरी फीचर ने विकासशील वेबसाइटों के संदर्भ में कई दिलचस्प संभावनाओं को जन्म दिया है जो कई अलग-अलग स्क्रीन आकारों और उपकरणों के साथ समायोजित होते हैं।

हालाँकि, व्यवहार में, मुझे समझ में आने लगा है कि CSS3 mediaक्वेरी सुविधा और संपूर्ण "उत्तरदायी वेब डिज़ाइन" आंदोलन, अपने वादे पर खरा नहीं उतर सकता है।

मुझे जो समस्या दिखाई दे रही है, वह यह है कि दिन के अंत में, वेब डेवलपर्स ज्यादातर इस बात की परवाह करते हैं कि उनके उपयोगकर्ता किसी डेस्कटॉप, टेबलेट, या मोबाइल डिवाइस के माध्यम से सामग्री देख रहे हैं। लेकिन CSS3 केवल स्क्रीन रिज़ॉल्यूशन का पता लगाने के लिए एक साधन प्रदान करता है । सिद्धांत रूप में, स्क्रीन रिज़ॉल्यूशन का पता लगाना विभिन्न विभिन्न उपकरणों के लिए समायोजित करने का एक शानदार तरीका लगता है। लेकिन व्यवहार में ...

मान लीजिए कि हमारे पास एक सरल जावास्क्रिप्ट फ़ंक्शन है जो स्क्रीन चौड़ाई को आउटपुट करता है:

function foo()
{
   alert(screen.width);
}

मेरे ब्लैकबेरी टच पर, यह आउटपुट:

मेरे सैमसंग गैलेक्सी पर, यह आउटपुट:

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

यह मुझे मीडिया के प्रश्नों पर आधारित संपूर्ण CSS3 "उत्तरदायी वेब डिज़ाइन" आंदोलन के पीछे के पूरे ज्ञान पर प्रश्नचिन्ह लगाता है। यह लगभग ऐसा लगता है कि mediaक्वेरी फ़ीचर, डेस्कटॉप स्क्रीन पर आकार बदलने वाली ब्राउज़र विंडो के बजाय विभिन्न मोबाइल उपकरणों के बजाय बेहतर है।

मोबाइल या टैबलेट उपकरणों का पता लगाने के लिए एक अन्य संभावित तकनीक सुविधा का पता लगाने का उपयोग करना है, अगर जाँच की जाती है कि ontouchstartघटना का समर्थन किया गया है। लेकिन यहां तक कि यह अविश्वसनीय होता जा रहा है क्योंकि कई डेस्कटॉप स्क्रीन स्पर्श का समर्थन करना शुरू करते हैं।

प्रश्न: तो ... एक वेब डेवलपर के रूप में, अगर मैं आरडब्ल्यूडी या फीचर डिटेक्शन पर भरोसा नहीं कर सकता, तो क्या उपयोगकर्ता-एजेंट को सूँघना (हमेशा की तरह कुख्यात है) मोबाइल उपकरणों का पता लगाने का सबसे अच्छा विकल्प है?

web-development javascript css

— Channel72
स्रोत

यदि रिस्पॉन्सिव वेब डिज़ाइन का लक्ष्य है (विकिपीडिया के दावे के अनुसार ) "कम से कम आकार, पान और स्क्रॉलिंग के साथ आसान पढ़ना और नेविगेशन", तो आपको इस बात की परवाह क्यों है कि यह डेस्कटॉप या मोबाइल है? क्या मायने रखता है डिवाइस का स्क्रीन रिज़ॉल्यूशन और स्क्रीन का आकार, न कि यह किस प्रकार का डिवाइस है। नहीं?

— ruakh

मुझे लगता है कि मैं जो कह रहा हूं वह यह है कि "स्क्रीन रिज़ॉल्यूशन" और वास्तविक स्क्रीन आकार (जैसे स्क्रीन की चौड़ाई का सेंटीमीटर / इंच) के बीच संबंध तेजी से क्षणिक होता जा रहा है।

— Channel72

मुझे लगा कि आप डिवाइस-चौड़ाई मीडिया क्वेरी के साथ कुछ करने वाले हैं क्योंकि ऐप्पल के "रेटिना" डिवाइसों की पिक्सेल घनत्व के साथ चौड़ाई / रिज़ॉल्यूशन विशेष रूप से गलत हो रहा है। तो फिर अगर मोबाइल डिवाइस के लिए डिवाइस की चौड़ाई सामान्य चौड़ाई के भीतर है तो आप एक अलग लेआउट दिखाते हैं। एक टैबलेट / डेस्कटॉप उपयोगकर्ता के लिए मैं सिर्फ एक ही लेआउट यानी 1024px चौड़ा दिखाता हूं।

— ज़ुलाउज़

@zuallauz, device-widthबहुत बुरे के लिए समर्थन नहीं है ?

— Channel72

क्यों नहीं उन्हें इकाइयों द्वारा जाना जाता है? इस तरह से सामग्री उपलब्ध पाठ स्थान के आधार पर

जवाबों:

विशिष्ट उपकरणों के बारे में इतनी चिंता करना बंद करें।

यह पता लगाने की क्षमता है कि कोई उपयोगकर्ता आपकी वेबसाइट को स्मार्टफोन, टैबलेट या डेस्कटॉप के माध्यम से देख रहा है या नहीं, लगता है कि यदि आप स्क्रीन पर जा रहे हैं, तो यह बहुत मुश्किल हो रहा है।

यह है तेजी से मुश्किल स्क्रीन रिज़ॉल्यूशन के माध्यम से पता लगाने के लिए पर अपने डिजाइन जब को तोड़ मरोड़ कर रहा है अच्छा हो रही है, और यह केवल कठिन हो जाएगा अधिक उपकरणों के बाजार में प्रवेश के रूप में है, लेकिन मीडिया के प्रश्नों के प्रयोजन के मीडिया क्वेरी types.What डिवाइस का पता लगाने के नहीं है वर्तमान आयामों में इसका उपयोग करना सुखद नहीं है। यदि साइट 550px चौड़े पर टूटने लगती है, तो इससे कोई फर्क नहीं पड़ता कि उन आयामों के साथ कोई उपकरण है या नहीं: आप वहां ब्रेकपॉइंट सेट करते हैं।

यह सुविधा का पता लगाने के साथ एक ही सौदा है। यदि डिवाइस स्पर्श का समर्थन करता है, तो मोबाइल डिवाइस या भविष्य की दीवार के आकार की निगरानी से क्या फर्क पड़ता है? किसी भी तरह से स्पर्श वृद्धि शायद उपयोगी होगी।

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

उपयोगकर्ता एजेंटों को भी सभी संभावनाओं को संभालने के लिए बहुत काम की आवश्यकता होती है। क्या आपके पास Android पर फ़ायरफ़ॉक्स के लिए एक है? IOS पर क्रोम? डॉल्फिन फ्रायो पर? WiiU ब्राउज़र? मेरे पुराने एलजी फीचर फोन पर बेहद सीमित ब्राउज़र? लिंक्स? IE 13? लिंक? बर्फ नेवला? ब्लैकबेरी प्लेबुक का ब्राउज़र? आप टेबलेट पर चलने वाले ओपेरा और फ़ोन पर चलने वाले ओपेरा के बीच अंतर कैसे बता रहे हैं?

यह सूची समय बढ़ने के साथ ही बढ़ सकती है।

— माइक गोस्मान
स्रोत

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

— Channel72

वहाँ वास्तव में होना चाहिए। सीएसएस पिक्सल को भौतिक पिक्सल नहीं कोण और दूरी का उपयोग करके परिभाषित किया जाना चाहिए । कई निर्माता हालांकि अपनी डिफ़ॉल्ट सेटिंग्स में इसे अनदेखा कर रहे हैं।

— माइक गोसमैन

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

— एरिक किंग

क्या होगा अगर आप मोबाइल उपयोगकर्ताओं के लिए पूरी तरह से अलग दृश्य की सेवा करने जा रहे हैं। डेस्कटॉप उपयोगकर्ताओं के लिए आवश्यक सभी अप्रासंगिक डेटा को डाउनलोड करने से मोबाइल उपयोग को रोकने के बारे में क्या। यूजर एजेंट जाने का रास्ता ...

— जॉन

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

— लूटना
स्रोत

यदि किसी को उपयोगकर्ता एजेंट डेटा में गलत डेटा प्रदान करने की आवश्यकता होती है, तो उसे वेबसाइट का डिफ़ॉल्ट संस्करण मिलेगा ...

— जॉन