नमस्कार, प्रिय ब्लॉग पाठकों। यह आश्चर्य की बात नहीं है कि रूसी इंटरनेट पर अनुकूली डिज़ाइन अधिक से अधिक लोकप्रिय हो रहा है। और निश्चित रूप से, लेआउट डिजाइनरों को इसका अध्ययन करने की आवश्यकता है। चूंकि रिस्पॉन्सिव डिज़ाइन जल्द ही लगभग सभी वेबसाइटों पर होगा, क्योंकि अधिक से अधिक लोग मोबाइल उपकरणों का उपयोग कर रहे हैं।
और मैं यह कहना चाहूंगा कि इसके बिना साइटों की तुलना में ऐसे उपकरणों पर पढ़ना अधिक सुविधाजनक है।
आज मैं आपको 5 बहुत उपयोगी और बेहतरीन सेवाओं से परिचित कराना चाहता हूं, जिनकी मदद से आप अपनी वेबसाइट की अनुकूलनशीलता की जांच कर सकते हैं।
और इसलिए, चलो चलें।
5 सेवाएँ जहाँ आप अनुकूलनशीलता के लिए अपनी वेबसाइट की जाँच कर सकते हैं। www.responsivedesigntest.netसाइटों की जाँच के लिए एक अच्छी सेवा. टैबलेट और फ़ोन दोनों के लिए कई स्क्रीन रिज़ॉल्यूशन हैं।
mattkersley.comमैट केर्स्ले की ओर से किसी वेबसाइट की जाँच के लिए एक सरल सेवा। सभी लोकप्रिय मोबाइल डिवाइस रिज़ॉल्यूशन भी उपलब्ध हैं।
एक बहुत अच्छी सेवा जो किसी भी साइट की जाँच करेगी। मुझे वास्तव में डिज़ाइन के साथ-साथ कार्यक्षमता भी पसंद आई।
बहुत सुंदर और कार्यात्मक सेवा. यह जांचना भी संभव है कि साइट टीवी पर कैसी दिखेगी :-)
रिस्पॉन्सिव वेबसाइट का परीक्षण कैसे करें? वेबसाइटों का परीक्षण करते समय क्या समस्याएँ आती हैं? विभिन्न उपकरण? डेस्कटॉप मॉनिटर पर किसी वेबसाइट का परीक्षण मोबाइल फोन जैसे हैंडहेल्ड डिवाइस पर परीक्षण से किस प्रकार भिन्न है? प्रतिक्रियाशील वेबसाइटों का परीक्षण करने के लिए हम किन उपकरणों का उपयोग कर सकते हैं? हमारा
रिस्पॉन्सिव वेब डिज़ाइन क्या है?रिस्पॉन्सिव वेब डिज़ाइन (आरडब्ल्यूडी) वेब डिज़ाइन के लिए एक दृष्टिकोण की परिभाषा है जिसका उद्देश्य इष्टतम अनुभव प्रदान करने के लक्ष्य के साथ वेबसाइट बनाना है - न्यूनतम आकार, पैनिंग और स्क्रॉलिंग के साथ पढ़ने और नेविगेट करने में आसान। विस्तृत श्रृंखलाडिवाइस (डेस्कटॉप से कंप्यूटर मॉनिटरमोबाइल फोन के लिए)।
आरडब्ल्यूडी के साथ निर्मित साइट निम्नलिखित तरीकों से तरल पदार्थ, आनुपातिक ग्रिड, प्रतिक्रियाशील छवियों और CSS3 मीडिया प्रश्नों का उपयोग करके अपने लेआउट को देखने के माहौल में अनुकूलित करती है:
- द्रव ग्रिड अवधारणा के लिए आवश्यक है कि पृष्ठ तत्व का आकार सापेक्ष इकाइयों में हो, जैसे प्रतिशत, न कि निरपेक्ष इकाइयों, जैसे कि पिक्सेल या बिंदु।
- लचीली छवियांउन्हें संबंधित तत्व के बाहर प्रस्तुत होने से रोकने के लिए सापेक्ष इकाइयों में भी मूल्यांकन किया जाता है।
- मीडिया क्वेरीज़ किसी पृष्ठ को उस डिवाइस की विशेषताओं के आधार पर विभिन्न सीएसएस स्टाइलिंग नियमों का उपयोग करने की अनुमति देती हैं, जिस पर साइट प्रदर्शित की जा रही है, अक्सर ब्राउज़र की चौड़ाई।
बहुत से लोग अब वेबसाइटों तक पहुंचने के लिए अपने मोबाइल फोन या टैबलेट का उपयोग करते हैं, इसलिए उत्तरदायी वेब डिज़ाइन का परीक्षण करना महत्वपूर्ण है क्योंकि मोबाइल उपकरणों पर उपयोगकर्ता का अनुभव डेस्कटॉप कंप्यूटर से बहुत अलग है।
शायद एक आज्ञाकारी वेबसाइट के परीक्षण का सबसे चुनौतीपूर्ण हिस्सा यह है कि वेबसाइट कई उपकरणों और प्लेटफार्मों पर उम्मीद के मुताबिक प्रदर्शन करती है, लेकिन वास्तव में बाजार में हर मोबाइल डिवाइस पर परीक्षण करना हममें से अधिकांश के लिए अव्यावहारिक है।
कई परीक्षक जो प्रतिक्रियाशील वेब डिज़ाइन का परीक्षण शुरू करते हैं, वे आमतौर पर व्यूपोर्ट आकार में फिट होने के लिए ब्राउज़र विंडो का आकार बदलकर शुरू करते हैं चल दूरभाष, टैबलेट और डेस्कटॉप। यह विधि आम तौर पर विभिन्न व्यूइंग पोर्ट में किसी वेबसाइट का त्वरित रूप से निरीक्षण करने के लिए उपयुक्त होती है और जब हम ब्राउज़र विंडो को छोटा या बड़ा करते हैं तो अंतर्निहित प्रदर्शन समस्याओं की पहचान करने में हमारी मदद करती है।
हालाँकि, वास्तविक मोबाइल उपकरणों पर परीक्षण करना एक बिल्कुल अलग अनुभव है।
एमुलेटर का उपयोग करना
मोबाइल एमुलेटर एक वेब-आधारित सिमुलेशन है कि वेबसाइटें और एप्लिकेशन मोबाइल वातावरण में कैसे प्रदर्शित और कार्य करेंगे।
हालाँकि एमुलेटर आपको सटीक परीक्षण उपकरण प्रदान नहीं कर सकते हैं जिनकी आपको आवश्यकता होगी, फिर भी वे किसी वेबसाइट की उच्च-स्तरीय कार्यक्षमता का परीक्षण करने के लिए एक लागत प्रभावी समाधान हैं।
गूगल डेवटूल्स
डेवटूल्स में गूगल क्रोमडिवाइस मोड नामक एक सुविधा है जो प्रतिक्रियाशील परियोजनाओं के परीक्षण और डीबगिंग के लिए उपयोगी टूल से भरी हुई है।
अधिकांश अन्य प्रतिक्रियाशील डिज़ाइन परीक्षण टूल के विपरीत, जो केवल आपकी स्क्रीन का आकार बदलते हैं, यह टूल वास्तव में आपके वेब ब्राउज़र के भीतर मोबाइल डिवाइस अनुभव, विशेष रूप से टैपिंग और स्क्रॉलिंग जैसे स्पर्श इंटरैक्शन का अनुकरण करता है।
कुछ सामान्य नियमप्रतिक्रियाशील वेब डिज़ाइन का परीक्षण:
जब मॉड्यूल ब्राउज़र विंडो को सिकोड़ते और विस्तारित करते हैं या जब आप अपने मोबाइल डिवाइस को घुमाते हैं तो उनके स्थान की जाँच करें। स्विच करने पर विभिन्न मॉड्यूल गायब हो सकते हैं डेस्कटॉप कंप्यूटरमोबाइल पर, लेकिन सुनिश्चित करें कि आपको ठीक-ठीक पता हो कि कौन से मॉड्यूल किस व्यूपोर्ट में दिखाई देने चाहिए।
निष्कर्ष के तौर पर
पता लगाएं कि आपके वेब एप्लिकेशन का उपयोग कैसे किया जा रहा है। तुम पा सकते हो विशाल राशियह देखने के लिए Google Analytics टूल से जानकारी प्राप्त करें कि आपके ग्राहक आपकी वेबसाइट तक पहुँचने के लिए किन उपकरणों का उपयोग करते हैं। बुनियादी जांच और उच्च-स्तरीय कार्यात्मक परीक्षण करने के लिए स्वचालित टूल और एमुलेटर का उपयोग करें और इसे वास्तविक मैन्युअल डिवाइस परीक्षण के साथ संयोजित करें।
वेब प्रौद्योगिकियों के विकास के साथ, वेब विकास की आवश्यकताएँ भी बढ़ती हैं। वेब डेवलपर, लेआउट डिज़ाइनर, या जैसा कि उन्हें आज फ्रंटएंड डेवलपर कहा जाता है, सबसे अधिक दबाव महसूस करते हैं।
इस लेख में हम अनुकूली लेआउट के बारे में थोड़ी बात करेंगे, क्योंकि यह "ट्रिक" अब बहुत महंगी है। जब अनुकूली लेआउट की बात आती है, तो किसी भी स्तर के लेआउट डिजाइनर ग्राहकों या परियोजना प्रबंधकों को, इसे हल्के ढंग से कहें तो, गुस्से से देखते हैं, क्योंकि वे समझते हैं कि यह कितना मुश्किल है।
बहुत से लोग अनुकूली लेआउट को लचीले लेआउट के साथ भ्रमित करने लगते हैं, यह नौसिखिया लेआउट डिजाइनरों की एक बहुत ही सामान्य गलती है; आप पूछते हैं, क्या अंतर है?
आइए सबसे पहले, ताकि यह आपके लिए स्पष्ट हो और यूं कहें कि सभी बिंदु लगाएं और देखें कि लेआउट किस प्रकार के हैं।
लेआउट 4 प्रकार के होते हैं:
आइए सभी प्रकारों पर अधिक विस्तार से विचार करें।
1. निश्चित लेआउट
ब्लॉक अपनी चौड़ाई नहीं बदलते. कम-रिज़ॉल्यूशन मॉनिटर पर, एक क्षैतिज स्क्रॉल बार दिखाई देता है।
#temnyi, #svetlyi (चौड़ाई: 440px;)
2. रबर लेआउट
ब्राउज़र विंडो के आकार के आधार पर ब्लॉक अपनी चौड़ाई बदलते हैं। यह अधिकतम और न्यूनतम मान (अधिकतम-चौड़ाई संपत्ति) ले सकता है। लेकिन स्क्रीन छोटी होने के कारण आप 50% को 50% से 100% नहीं कर सकते।
#temnyi, #svetlyi (चौड़ाई: 50%; )
3. अनुकूली लेआउट
@मीडिया या स्क्रिप्ट का उपयोग करके कार्यान्वित किया गया। विशिष्ट ज्ञात उपकरणों (320, 768, 1024, आदि) के लिए अनुकूलित। कोई भी परिवर्तन निर्दिष्ट स्तरों में से किसी एक पर पहुँचने के बाद झटके में होता है। के लिए निश्चित रूप से उपयुक्त है
#temnyi, #svetlyi (चौड़ाई: 430px; ) @मीडिया (अधिकतम-चौड़ाई: 1220px) ( #temnyi, #svetlyi (चौड़ाई: 380px; ) ) @मीडिया (अधिकतम-चौड़ाई: 1120px) ( #temnyi, #svetlyi (चौड़ाई) : 325px; ) ) @मीडिया (अधिकतम-चौड़ाई: 680px) ( #temnyi, #svetlyi (चौड़ाई: 200px; ) )
4. उत्तरदायी लेआउट
यह तरल पदार्थ और अनुकूली लेआउट का एक संयोजन है। लागू करना सबसे कठिन। लेकिन परिणाम सबसे स्वीकार्य है. यह कहना सुरक्षित है कि साइट किसी भी डिवाइस के अनुकूल हो जाएगी।
#temnyi, #svetlyi (चौड़ाई: 50%; ) @मीडिया (अधिकतम-चौड़ाई: 1006px) ( #temnyi, #svetlyi (चौड़ाई: 100%; ) )
तो हमने 4 प्रकार के वेबसाइट लेआउट के बारे में बात की। अब हमारी चमत्कारिक अनुकूली लेआउट स्क्रिप्ट का समय आ गया है। मुझे आशा है कि मुझे कुछ भी समझाने की आवश्यकता नहीं है, स्क्रिप्ट काफी सरल है, हम सिर्फ यह कह रहे हैं कि जब आप बदलेंगे तो कुछ ब्लॉक कहीं मिल जाएंगे और बस इतना ही। निःसंदेह ऐसा संभव है सीएसएस शैलियाँ, लेकिन आपको सभी तरीकों को जानना होगा; कभी-कभी कुछ स्थानों पर कुछ काम नहीं करेंगे और कुछ बिल्कुल सही होंगे।
अनुकूली लेआउट स्क्रिप्ट:
/* आइए एक वेरिएबल बनाएं जिसमें आप कोड में सुविधाजनक उपयोग के लिए मोनोजेस्ट कक्षाएं डाल सकें।< 640) { $(".right-content").css("float:none; clear:both"); $(".header-menu").css("float","left"); if(width < 480) { /*какое нибудь условие*/ if(width < 320) { /*какое нибудь условие*/ } } } /*Возвращает все стили на свои места т.е при расширении он примет первоначальный вид*/ else { $(".right-content").css("float:left; clear:none"); $(".header-menu").css("float:none") } });
यानी, यहां यह उनका एक बार पता लगाता है और बस इतना ही, प्रत्येक नमूने से पहले नहीं! यह एक उपयोगी सुविधा है */ var my = ( window: $(window) );
/*वास्तव में फ़ंक्शन ही*/ $(window).resize(function() ( /*एक वेरिएबल जो विंडो की चौड़ाई निर्धारित करता है और इसे चौड़ाई वेरिएबल में डालता है*/ var width = my.window.width( ); /*विंडो ट्रांसफॉर्मेशन कंडीशन यानी एक ऐसी स्थिति जो तब निष्पादित होती है जब विंडो की चौड़ाई एक निश्चित आकार तक पहुंच जाती है */ if(my.window.width()
बस इतना ही। यदि आपके कोई प्रश्न हैं, तो टिप्पणियों में लिखें, पर जाएँ
लेखक की ओर से: "इस ब्राउज़र का आकार बदलना बंद करें, यह जल्द ही मिटा दिया जाएगा!" आप यह कितनी बार सुनते हैं? अच्छा, ठीक है, शायद ऐसा अक्सर नहीं, लेकिन यदि आप प्रतिक्रियाशील वेबसाइट विकसित करते हैं, तो आप जानते हैं कि मैं किस बारे में बात कर रहा हूं: हर बार जब आप DOM या CSS को संपादित करते हैं, तो आप ब्राउज़र के किनारे को आगे-पीछे खींच रहे होते हैं, परिवर्तनों का परीक्षण कर रहे होते हैं और अशुद्धियाँ खोज रहे हैं।
सामान्य तौर पर, इनमें से अधिकांश प्रयास विभिन्न उपकरणों के स्क्रीन आकार की नकल करने का प्रयास हैं। यदि आप उद्यम विकास कर रहे हैं, तो संभवतः आपके पास परीक्षण के लिए कंपनी द्वारा प्रदत्त बहुत सारे उपकरण हैं। जहां मैं काम करता हूं, हमारे पास आईपैड, आईफोन, एक या दो अन्य टैबलेट, लैपटॉप और डेस्कटॉप हैं। यदि आपके पास वह विलासिता नहीं है, तो आपको जो आपके पास है उसका उपयोग करना होगा।: किंडल और नेक्सस 7. मैं अपने फ्रीलांस विकास का परीक्षण करने के लिए इन उपकरणों का उपयोग करता हूं, लेकिन यह स्पष्ट है कि यह एक विस्तृत चयन नहीं है। बिल्कुल नहीं आईओएस डिवाइस, और जबकि मुझे शुरुआती अपनाने वाला माना जाता है, मैं हर नए फोन/टैबलेट/टैबलेट की बिक्री शुरू होते ही उसे खरीदने की योजना नहीं बनाता।
तो एक डेवलपर को क्या करना चाहिए? सौभाग्य से, ऐसे ब्राउज़र-आधारित टूल की संख्या बढ़ रही है जो विभिन्न उपकरणों के स्क्रीन आकार का अनुकरण करते हैं। बेशक, अलग-अलग उपकरण अलग-अलग सुविधाओं के सेट और दक्षता के विभिन्न स्तरों के साथ आते हैं। हम उनमें से कुछ को यहां देखेंगे।
परीक्षण उद्देश्यों के लिए, मैंने अपनी बनाई हुई पहली वास्तविक प्रतिक्रियाशील वेबसाइट PajamasOnYourFeet.com ली। यह ब्राउनी HTML5 टेम्प्लेट पर आधारित है, जो ईग्रैपलर पर डेवलपर समुदाय को बहुत उदारतापूर्वक और स्वतंत्र रूप से प्रदान किया जाता है।
क्या मैं उत्तरदायी हूँ?क्या मैं उत्तरदायी हूँ? - आपकी साइट का पूरी तरह से आसान, त्वरित पूर्वावलोकन कि यह चार अलग-अलग डिवाइसों पर कैसे दिखाई देगी। ये चारों आईओएस हैं, और डेवलपर वेबसाइट पर अपनी पसंद बताता है। यह कोई नियंत्रण या चयन प्रदान नहीं करता है, बस एक बहुत ही सरल और सुरुचिपूर्ण प्रदर्शन है। विंडो आयाम देखें:
डेस्कटॉप - 1600 x 992px, स्केल के अनुसार घटता हुआ (0.3181)
लैपटॉप - 1280 x 802px, घटता हुआ स्केल (0.277)
टैबलेट - 768 x 1024px, स्केल के अनुसार घटता हुआ (0.219)
मोबाइल - 320 x 480px, स्केल से घटता हुआ (0.219)
डेवलपर को उद्धृत करने के लिए: “यह एक परीक्षण उपकरण नहीं है, वास्तविक उपकरणों पर ऐसा करना बहुत महत्वपूर्ण है। लेकिन यह (मेरे लिए) त्वरित स्क्रीनशॉट लेने और क्लाइंट मीटिंग में आपके मतलब को "ड्रिल डाउन" करने का एक दृश्य अवसर प्रदान करने का एक उपकरण है।
डिवाइसपोन्सिव क्या मैं रिस्पॉन्सिव साइट के समान है? जो आपकी साइट को सरलता से और साफ-सुथरे तरीके से प्रदर्शित करता है, लेकिन जब उपकरणों की बात आती है तो इसमें कोई नियंत्रण या उपलब्ध विकल्प नहीं होता है। उन सभी को एक लंबे पृष्ठ पर एक साथ दिखाया गया है। इसकी एक दिलचस्प विशेषता है - आप हेडर के पृष्ठभूमि रंग को संपादित करके और अपना स्वयं का लोगो डालकर इसे संशोधित कर सकते हैं, और फिर इसे "प्रिंट" कर सकते हैं। इस तरह, एक तरह से, आप क्लाइंट को स्क्रीनशॉट दिखाते समय अपनी साइट को ब्रांड कर सकते हैं। इस साइट पर सिम्युलेटेड डिवाइस और स्क्रीन आकार:
मैकबुक - 1280 x 800
आईपैड (चित्र) - 768 x 1024
आईपैड (परिदृश्य) - 1024 x 768
किंडल (चित्र) - 600 x 1024
किंडल (परिदृश्य) - 1024 x 600
आईफोन (पोर्ट्रेट ओरिएंटेशन) - 320 x 480
आईफोन (परिदृश्य) - 480 x 320
गैलेक्सी (चित्र) - 240 x 320
आकाशगंगा(परिदृश्य) - 320 x 240
अधिकांश समान टूल की तरह, स्क्रॉल बार छोटे उपकरणों पर दिखाई देते हैं। में वास्तविक उपकरणवे दिखाई नहीं देंगे, लेकिन गैर-स्पर्शीय डिवाइस पर परीक्षण दृश्य को स्क्रॉल करने में सक्षम होने के लिए आपको कुछ रियायतें देनी होंगी।
डिवाइसपोनसिव की तरह, रिस्पॉन्सिव टेस्ट आपकी साइट को कई डिवाइसों पर प्रदर्शित करता है, लेकिन उन सभी को एक ही पेज पर एक साथ दिखाने के बजाय, आप पेज के शीर्ष पर एक साधारण मेनू से चुनते हैं कि कौन सा डिवाइस देखना है। इस साइट को एक मध्यम आकार के लैपटॉप पर ब्राउज़ करने पर, मैंने पाया कि पृष्ठ को छोटा करना बहुत अच्छा काम करता है, जिससे आप उस डिवाइस की विंडो के अंदर पूरी साइट देख सकते हैं जिसका मैं परीक्षण कर रहा हूँ।
यहां तेरह अलग-अलग देखने वाली खिड़कियां उपलब्ध हैं बड़ा मॉनिटरडेस्कटॉप कंप्यूटर को तथाकथित "क्रैपी एंड्रॉइड" कहा जाता है (निष्पक्ष होने के लिए, उनके पास "" नामक एक विकल्प भी है एंड्रॉइड बेहतर है"(अच्छा एंड्रॉइड)।
एक बार फिर, फ़ायरफ़ॉक्स इस साइट पर थोड़ा लड़खड़ा गया है। स्क्रीनशॉट में ध्यान दें - हरे हेडर और सफेद पृष्ठभूमि वाले सामग्री क्षेत्र के बीच - केवल एक नीली पट्टी है जहां छवि स्लाइडर दिखाई देना चाहिए।
यह पिछले दो के समान है, और केवल एक चीज जो रिस्पॉन्सिव बनाती है, वह है एक डिवाइस से दूसरे डिवाइस तक डिस्प्ले का स्मूथ एनीमेशन, साथ ही एक पारभासी ओवरले जो साइट की रियल एस्टेट को व्यूपोर्ट से बाहर दिखाता है। .
यहां उपलब्ध एकमात्र उपकरण विकल्प स्वचालित हैं, जो आपकी ब्राउज़र विंडो को भरते हैं, साइट को वैसे दिखाते हैं जैसे आप उस पर जाने पर उसे देखते: डेस्कटॉप; टैबलेट (परिदृश्य अभिविन्यास); टैबलेट (पोर्ट्रेट ओरिएंटेशन); स्मार्टफ़ोन (लैंडस्केप ओरिएंटेशन) और स्मार्टफ़ोन (पोर्ट्रेट ओरिएंटेशन), पिक्सेल आयाम नहीं दिए गए हैं।
एक बार फिर, कई अलग-अलग सुविधाएँ और विकल्प स्क्रीनक्वेरीज़ को अन्य साइटों से अलग करते हैं। पोर्ट्रेट और के बीच स्विच करने के लिए एक अलग तत्व के साथ 14 फोन और 12 टैबलेट डिवाइस हैं परिदृश्य उन्मुखीकरण. इन्हें क्रमांकित पिक्सेल ग्रिड पर प्रदर्शित किया जाता है, जिसमें परीक्षण प्रदर्शन के नीचे दाईं ओर दिखाए गए आयाम होते हैं। डिस्प्ले के किनारे खींचने योग्य हैं ताकि आप कस्टम आकार का परीक्षण कर सकें। परीक्षण क्षेत्र पर खींचें या क्लिक करें और पृष्ठभूमि कम अव्यवस्थित उपस्थिति के साथ ग्रे हो जाएगी।
दिलचस्प विशेषताइस साइट का - कई डिवाइसों के लिए एक "ट्रू व्यू" विकल्प है जो आपकी साइट को उस डिवाइस के लिए उपयुक्त दृश्य में लपेटता हुआ दिखाता है क्रोम ब्राउज़र. दुर्भाग्य से, और मैं पहले से ही इसका आदी हूँ, फ़ायरफ़ॉक्स परीक्षण साइट के छवि स्लाइडर को प्रदर्शित करने में असमर्थ है। चिंता न करें, जब ब्राउज़र की बात आती है तो मैं वास्तव में फ़ायरफ़ॉक्स को पसंद करता हूं, लेकिन सौभाग्य से हमारे पास विकल्प हैं।
स्क्रीनफ़्लाई वास्तव में प्रयोज्य कारक को बढ़ाती है। यह टैबलेट से बड़े नौ डिवाइस पेश करता है, जिसमें 10 इंच के लैपटॉप से लेकर 24 इंच का डेस्कटॉप, पांच टैबलेट, नौ स्मार्टफोन, तीन टीवी आकार और एक कस्टम स्क्रीन आकार विकल्प शामिल हैं। आपके द्वारा चुने गए किसी भी विकल्प का उपयोग करके पोर्ट्रेट या लैंडस्केप में घुमाया जा सकता है व्यक्तिगत तत्वमेनू नियंत्रण. आप चुन सकते हैं कि स्क्रॉलिंग की अनुमति देनी है या नहीं और एक बटन के एक क्लिक से एक साझा करने योग्य लिंक तैयार कर सकते हैं।
यह साइट पिक्सेल आकार की जानकारी प्रस्तुत करने के तरीके में सक्रिय रूप से उपयोगी है। मेनू में प्रत्येक डिवाइस को एक नाम और पिक्सेल आयामों के साथ दिखाया गया है, आपकी ब्राउज़र विंडो का आकार विंडो के ऊपरी दाएं कोने के पास दिखाया गया है, और चयनित विकल्प के आयाम डिस्प्ले के नीचे पाद लेख में दिखाए गए हैं। साइट का यूआरएल परीक्षण किया जा रहा है। यह छोटी सुविधा स्क्रीनशॉट को दस्तावेज़ित करना और ग्राहकों के साथ जानकारी साझा करना आसान बनाती है।
उपरोक्त सभी इसे पहले से ही एक आदर्श उपकरण बना देंगे, लेकिन स्क्रीनफ्लाई डेवलपर्स को इसे सरल बनाने का अवसर मिला उच्च श्रेणीऔर प्रॉक्सी संपत्ति प्रदान की। उनकी वेबसाइट से उद्धरण: “जब आप उनकी वेबसाइट देखते हैं तो स्क्रीनफ़्लाई डिवाइस का प्रतिरूपण करने के लिए प्रॉक्सी सर्वर का उपयोग कर सकता है। प्रॉक्सी आपके द्वारा चुने गए उपकरणों के उपयोगकर्ता एजेंट स्ट्रिंग का अनुकरण करता है, लेकिन उन उपकरणों के व्यवहार का नहीं।'' यहां शामिल अन्य सभी उपकरण विशेष रूप से सीएसएस से संबंधित हैं। स्क्रीनफ़्लाई एकमात्र ऐसा है जो उपयोगकर्ता एजेंट स्ट्रिंग के आधार पर परीक्षण की अनुमति देता है।
इस तरह से परीक्षण करने के बाद मैंने मौजूदा साइट के साथ एक साइट बनाई मोबाइल संस्करण, मैं कह सकता हूँ कि परिणाम बहुत अच्छे थे। सब कुछ बिल्कुल वैसा ही प्रदर्शित हुआ जैसा मैंने उम्मीद की थी और सुविधाएँ परीक्षण योग्य थीं। यह कहा जाना चाहिए कि उपयोगकर्ता एजेंट स्ट्रिंग्स का परीक्षण पारंपरिक हो गया है, लेकिन यह साइट बहुत समय पहले बनाई गई थी, और प्रॉक्सी प्रॉपर्टी वास्तव में इसके लिए एक बहुत ही उपयोगी अतिरिक्त साबित हुई।
तो, आप देख सकते हैं कि प्रतिक्रियाशील वेबसाइटों के परीक्षण के लिए बहुत सारे संसाधन उपलब्ध हैं। वे अद्वितीय गुणों में भिन्न हैं; आप किन साइटों का उपयोग करते हैं यह आपकी व्यक्तिगत प्राथमिकताओं और आवश्यकताओं पर निर्भर करेगा, और मैं आपको उनका पता लगाने और उनके साथ प्रयोग करने के लिए प्रोत्साहित करने का प्रयास करता हूं। जितना अधिक हम डेवलपर्स के पास वास्तव में है उपयोगी उपकरण, उतना ही बेहतर.
फ़्रेमवर्क, जैसे कि या, जो पेज लेआउट को बहुत सुविधाजनक और तेज़ बनाते हैं।
इसका तात्पर्य सभी उपकरणों और मॉनिटर एक्सटेंशन पर एक वेब पेज के उत्कृष्ट प्रदर्शन से है। संभवतः, प्रत्येक लेआउट डिज़ाइनर के पास अपने लेआउट का परीक्षण करने के लिए सभी संभावित डिस्प्ले एक्सटेंशन वाले उपकरणों का पूरा सेट नहीं होता है। यह आश्चर्य की बात नहीं है, क्योंकि तकनीक इन दिनों सस्ती नहीं है।
इसलिए। ढेर सारे मोबाइल फोन और टैबलेट खरीदना कोई विकल्प नहीं है - हम बर्बाद हो जाएंगे। क्या करें? इन कार्यों के लिए, अनुकूली वेबसाइटों के परीक्षण के लिए सेवाएँ विकसित की गई हैं। उनके संचालन का सिद्धांत बहुत सरल है। अक्सर जहां पृष्ठ खुलता है वहां एक निश्चित आकार का एक फ्रेम होता है। प्रभाव लगभग वैसा ही होता है जैसा देखने पर होता है मोबाइल डिवाइस. मैं यह नोट करना चाहूंगा कि सेवा हमेशा फ़ोन या टैबलेट पर पृष्ठ का प्रदर्शन सटीक रूप से नहीं दिखाएगी। कोडिंग करते समय, आपको सेवाओं का उपयोग करके परीक्षण करना चाहिए, लेकिन पूरा होने के बाद, यदि संभव हो, तो सबसे सामान्य उपकरणों पर परीक्षण करें।
इसलिए। आपके ध्यान के लिये सर्वोत्तम उपकरणअनुकूली वेबसाइटों के परीक्षण के लिए।
Adobe की ओर से प्रतिक्रियाशील वेबसाइटों के परीक्षण के लिए एक उपकरण। इसका उपयोग करने के लिए आपको इसे अपने कंप्यूटर पर इंस्टॉल करना होगा।
प्रोग्राम आपको वाईफ़ाई के माध्यम से अपने डिवाइस को सिंक्रोनाइज़ करने और साइट को वैसे ही देखने की अनुमति देता है जैसे यह आपके डिवाइस पर प्रदर्शित होगी। पर इस समयनिम्नलिखित ऑपरेटिंग सिस्टम वाले डिवाइस समर्थित हैं: iOS, Android, किंडल फायर।