उत्तरदायी डिजाइन का परीक्षण कैसे करें?

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

आपके आंदोलनों का उद्देश्य विभिन्न उपकरणों की स्क्रीन का अनुकरण करना है।

कॉर्पोरेट वातावरण में, अक्सर, आपके पास परीक्षण के लिए कंपनी द्वारा उपलब्ध कराए गए कई गैजेट होते हैं। मेरे काम में, मेरे पास एक आईपैड, आईपॉड, अन्य टैबलेट, लैपटॉप, साथ ही साथ डेस्कटॉप मॉनिटर भी हैं। यदि आपके पास ऐसी लक्जरी नहीं है, तो आपको उस समय उपयोग करना होगा जो हाथ में है।

सौभाग्य से, ऑनलाइन उपकरण का एक प्रभावशाली सेट है जो विभिन्न डिवाइस विकर्णों का अनुकरण करता है। बेशक, उनमें से प्रत्येक के अपने फायदे और नुकसान हैं, हम ऐसे कई उपकरणों पर विचार करेंगे।

परीक्षण के लिए, मैंने वास्तव में उत्तरदायी साइट PajamasOnYourFeet.com को चुना, साइट एचटीएमएल 5 टेम्पलेट के आधार पर बनाई गई है, जो मुफ्त में ईगरप्लर द्वारा प्रदान की गई है ।

क्या मैं जिम्मेदार हूं?

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

उपलब्ध आकार:

• डेस्कटॉप मॉनिटर - 1600 x 992px;
• लैपटॉप - 1280 x 802px;
• टैबलेट - 768 x 1024px;
• मोबाइल फोन - 320 x 480px।

मैं डेवलपर को उद्धृत करता हूं: “यह एक परीक्षण उपकरण नहीं है, वास्तविक उपकरणों पर परीक्षण का संचालन करना बेहद महत्वपूर्ण है। और यह टूल आपको स्क्रीनशॉट लेने में मदद करेगा और क्लाइंट को आपके मतलब के बारे में बताएगा। "

दो अच्छी विशेषताएं हैं: आपकी स्क्रीन के चारों ओर उपकरणों को खींचने की क्षमता, साथ ही एक परीक्षण साइट के लिए लिंक साझा करने की क्षमता।

deviceponsive

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

डिवाइस और उपलब्ध स्क्रीन रिज़ॉल्यूशन।

• मैकबुक - 1280 x 800
• आईपैड पोर्ट्रेट - 768 x 1024
• iPad पोर्ट्रेट - 1024 x 768
• किंडल पोर्ट्रेट - 600 x 1024
• जलाने का परिदृश्य अभिविन्यास - 1024 x 600
• iPhone पोर्ट्रेट - 320 x 480
• iPhone परिदृश्य अभिविन्यास - 480 x 320
• गैलेक्सी पोर्ट्रेट - 240 x 320
• गैलेक्सी परिदृश्य अभिविन्यास - 320 x 240

अधिकांश ऐसे उपकरणों के साथ, स्क्रॉलबार प्रदर्शित किए जाते हैं जो वास्तविक उपकरणों पर मौजूद नहीं होते। यह गैर-स्पर्श उपकरणों पर स्क्रॉल करने में सक्षम करने के लिए एक आवश्यक कदम है।

उत्तरदायी परीक्षण

डिवाइसपोसिव की तरह, उत्तरदायी परीक्षण विभिन्न उपकरणों पर आपकी साइट प्रदर्शित करता है। लेकिन एक बार में सभी को दिखाने के बजाय, आप स्वयं पृष्ठ के शीर्ष मेनू में आवश्यक उपकरण चुनें। वैसे, स्केलिंग यहां सही ढंग से काम करता है, जो कम रिज़ॉल्यूशन पर उच्च रिज़ॉल्यूशन के परीक्षण की अनुमति देता है।

साइट पर 30 अलग-अलग रिज़ॉल्यूशन उपलब्ध हैं, जिसमें एक विशाल डेस्कटॉप मॉनीटर से लेकर "क्रैपी एंड्रॉइड" कहा जाता है (यह कहना उचित है कि एक सामान्य एंड्रॉइड है)।

फ़ायरफ़ॉक्स ब्राउज़र के रूप में, यह इस साइट के साथ सही ढंग से काम नहीं करता है। कृपया ध्यान दें कि स्क्रीनशॉट हरे शीर्षक और पृष्ठभूमि सामग्री के सफेद क्षेत्र के बीच एक स्लाइडर प्रदर्शित नहीं करता है।

responsive.is

पिछले दो औजारों के समान ही, लेकिन एक चीज है जो दूसरों के प्रति उत्तरदायी है। एक डिवाइस से दूसरे डिवाइस पर जाने के दौरान यह एक चिकनी एनीमेशन है, साथ ही साथ एक अर्ध-पारदर्शी क्षेत्र है जो वास्तविक साइट क्षेत्र दिखाता है जो देखने के क्षेत्र में नहीं आता है।

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

Screenqueries

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

इस साइट की एक दिलचस्प विशेषता यह है कि कई उपकरणों के लिए एक "ट्रूव्यू" विकल्प है जो आपकी साइट को डिवाइस के मूल ब्राउज़र में प्रदर्शित करता है।

दुर्भाग्य से, फ़ायरफ़ॉक्स यहाँ स्लाइडर को प्रदर्शित करने में सक्षम नहीं था। मुझे दोष देने की आवश्यकता नहीं है, फ़ायरफ़ॉक्स मेरा पसंदीदा ब्राउज़र है, लेकिन वहां आपके पास है।

Screenfly

स्क्रीनफ्लाय शायद सभी का सबसे कार्यात्मक है। टैबलेट डिवाइस से 9 से अधिक उपलब्ध हैं - 10 "लैपटॉप से, 24 तक" मॉनिटर, 5 टैबलेट, 9 फोन, 3 टेलीविज़न रिज़ॉल्यूशन, साथ ही साथ मनमाना रिज़ॉल्यूशन। यहां चित्र और परिदृश्य मोड में एक अलग स्विच जोड़ें, साथ ही स्क्रॉलिंग दिखाने का विकल्प भी। आप एक बटन के साथ परीक्षण के लिए एक लिंक भी साझा कर सकते हैं।

मेनू में प्रत्येक डिवाइस में एक पीएक्स स्क्रीन आकार होता है, और आपकी ब्राउज़र विंडो का वास्तविक आकार ऊपरी दाएं कोने में भी प्रदर्शित होता है।

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

---

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

अनुवाद के संबंध में पीएस त्रुटियां, कृपया पीएम में रिपोर्ट करें।