Viewport क्या है?

Scrapeless Agent Browser ऐसे कॉन्फ़िगरेबल ब्राउज़र वातावरण उपलब्ध कराता है जो पेज रेंडर करते हैं और ब्राउज़र आउटपुट कैप्चर करते हैं।

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

Viewport सेटिंग्स responsive नेविगेशन, लाइन wrapping, इमेज चयन और स्क्रॉल करने से पहले क्या दिखेगा, इन सबको प्रभावित करती हैं। ऑटोमेशन में, पेज सही तरह से लोड हो सकता है लेकिन viewport बदलने के कारण अलग-अलग कंट्रोल दिखा सकता है। Viewport कॉन्फ़िगरेशन को पेज के इनपुट का हिस्सा मानें, न कि केवल एक सहायक स्क्रीनशॉट सेटिंग।

Layout Viewport पेज के कार्यात्मक स्थान को परिभाषित करता है

Layout viewport वह स्थान है जिसके सापेक्ष ब्राउज़र दस्तावेज़ का लेआउट बनाता है। इसके आयाम responsive नियमों और सामग्री की व्यवस्था को प्रभावित करते हैं।

CSS में viewport मॉडल यह समझाता है कि दिखने वाला पेज लेआउट और दस्तावेज़ से कैसे संबंधित है। डेस्कटॉप ब्राउज़र पर, कंटेंट क्षेत्र का आकार बदलने से आमतौर पर layout viewport बदल जाता है और पेज अलग-अलग responsive व्यवस्थाओं के बीच स्विच कर सकता है।

कोई दस्तावेज़ viewport से ऊर्ध्वाधर या क्षैतिज रूप से आगे तक फैल सकता है। स्क्रॉल करने से देखे जा रहे हिस्से में बदलाव आता है, लेकिन पूरा दस्तावेज़ viewport के समान आकार का नहीं हो जाता। इसलिए एक पेज का दिखने वाला हिस्सा छोटा होने पर भी उसमें एक लंबा लेख हो सकता है।

ऑटोमेशन के लिए इच्छित लेआउट आयाम दर्ज करें। जो नेविगेशन कंट्रोल चौड़े लेआउट में मौजूद होता है, वह संकरे लेआउट में किसी मेनू बटन से बदला जा सकता है। पेज अपने वातावरण के अनुसार रेस्पॉन्ड कर रहा होता है; लोकेटर को इच्छित लेआउट स्थिति का प्रतिनिधित्व करना चाहिए।

Visual Viewport वर्तमान में दिखाई दे रही सामग्री का वर्णन करता है

Visual viewport वह हिस्सा है जो pinch zoom जैसे प्रभावों के बाद वर्तमान में पेज पर दिखाई दे रहा होता है। यह layout viewport से अलग हो सकता है, खासकर मोबाइल डिवाइस पर।

The VisualViewport interface उस दिखाई देने वाले क्षेत्र के बारे में जानकारी देता है। उपयोगकर्ता लेआउट के छोटे हिस्से पर ज़ूम कर सकता है बिना इसके कि हर layout नियम को ऐसे फिर से गणना करनी पड़े जैसे डिवाइस की स्क्रीन संकरी हो गई हो।

ऑन-स्क्रीन ब्राउज़र कंट्रोल और कीबोर्ड भी दिखने वाले क्षेत्र को प्रभावित कर सकते हैं, और उनका व्यवहार ब्राउज़र और कॉन्फ़िगरेशन पर निर्भर करता है। यह न मानें कि दृश्य ऊँचाई में हर बदलाव सभी डिवाइस पर layout आयामों में समान बदलाव लाता है।

यह अंतर overlays और fixed-position इंटरफ़ेस तत्वों के लिए मायने रखता है। कोई कंट्रोल एक viewport अवधारणा के सापेक्ष सही जगह पर हो सकता है लेकिन वर्तमान विज़ुअल क्षेत्र में आंशिक रूप से छिपा हुआ हो सकता है। जब पहुँचनीयता या मोबाइल उपयोगिता इस पर निर्भर हो, तो वास्तविक इंटरैक्शन स्थिति का परीक्षण करें।

CSS पिक्सेल फ़िजिकल डिस्प्ले पिक्सेल नहीं हैं

CSS पिक्सेल लेआउट यूनिट्स का वर्णन करते हैं, जबकि फ़िजिकल डिस्प्ले पिक्सेल हार्डवेयर की इमेज ग्रिड का वर्णन करते हैं। Device pixel ratio फ़िजिकल पिक्सेल डेंसिटी को ब्राउज़र वातावरण में CSS पिक्सेल आयामों से जोड़ता है।

The devicePixelRatio property उस संबंध का वर्णन करता है। ब्राउज़र एक ही CSS लेआउट को अलग-अलग संख्या के फ़िजिकल पिक्सेल से प्रस्तुत कर सकता है, इसलिए केवल किसी इमेज के पिक्सेल आयाम उस लेआउट की पूरी पहचान नहीं करते जिसने उसे बनाया।

स्क्रीनशॉट तुलना के लिए, लेआउट चौड़ाई को आउटपुट इमेज रिज़ॉल्यूशन से अलग समझें। अधिक घनत्व वाली इमेज वही एलिमेंट व्यवस्था दिखा सकती है। इसके विपरीत, अधिक चौड़ा लेआउट wrapping, नेविगेशन और दिखाई देने वाले कॉलमों की संख्या बदल सकता है।

स्क्रीन जानकारी बदलना जरूरी नहीं कि पेज viewport बदलने के समान ऑपरेशन हो। ऑटोमेशन क्लाइंट के वास्तविक viewport API की पुष्टि करें और कॉन्फ़िगरेशन के बाद रेंडर हुए लेआउट का निरीक्षण करें।

Viewport Meta सेटिंग मोबाइल लेआउट को प्रभावित करती है

Viewport meta सेटिंग मोबाइल ब्राउज़रों को बताती है कि पेज अपने layout viewport और initial scale का व्यवहार कैसे चाहता है। Responsive पेज आम तौर पर ऐसा लेआउट चौड़ाई मानते हैं जो डिवाइस चौड़ाई के अनुरूप हो।

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

Meta सेटिंग पेज दस्तावेज़ का हिस्सा होती है। किसी ऑटोमेशन क्लाइंट के पास भी ऐसी वातावरण सेटिंग्स होती हैं जो viewport और डिवाइस इम्यूलेशन को प्रभावित करती हैं। यह मानने से पहले दोनों पक्षों को समझें कि कोई मोबाइल कॉन्फ़िगरेशन किसी वास्तविक डिवाइस को दोहराता है।

केवल संकरा viewport मोबाइल इनपुट, ऑपरेटिंग सिस्टम व्यवहार, ब्राउज़र इंटरफ़ेस या हार्डवेयर प्रदर्शन को पुन: उत्पन्न नहीं करता। इसका उपयोग responsive लेआउट जाँचने के लिए करें, फिर वास्तविक कम्पैटिबिलिटी सवाल के अनुरूप अन्य शर्तें जोड़ें।

रेस्पॉन्सिव ब्रेकपॉइंट्स वर्कफ़्लो बदल सकते हैं

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

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

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

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

किसी वर्कफ़्लो के भीतर तब तक व्यूपोर्ट को स्थिर रखें जब तक कि आकार बदलना परीक्षण का उद्देश्य न हो। निष्कर्षण (extraction) के दौरान आकार बदलने से पेज का लेआउट बदल सकता है, दृश्यता बदल सकती है, या एप्लिकेशन इंटरफ़ेस घटकों का पुनर्निर्माण कर सकता है।

स्क्रीनशॉट्स के लिए एक स्पष्ट कैप्चर क्षेत्र की आवश्यकता होती है

एक स्क्रीनशॉट टूल के आधार पर व्यूपोर्ट, चुने हुए तत्व, या बड़े दस्तावेज़ क्षेत्र को कैप्चर कर सकता है। ये कैप्चर प्रकार अलग-अलग प्रश्नों के उत्तर देते हैं।

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

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

परिभाषित तत्परता स्थिति के बाद कैप्चर करें। फ़ॉन्ट्स, छवियाँ, और असिंक्रोनस सामग्री प्रारंभिक नेविगेशन के बाद ज्यामिति को बदल सकते हैं। लोडिंग स्थिति के दौरान ली गई स्क्रीनशॉट की तुलना ऐसे नहीं की जानी चाहिए मानो वह पूर्ण पृष्ठ का प्रतिनिधित्व करती हो।

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

लेज़ी लोडिंग दृश्यता को डेटा उपलब्धता से जोड़ता है

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

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

वर्चुअलाइज्ड सूचियाँ एक और विचार जोड़ती हैं: दस्तावेज़ स्क्रॉल करते समय उपयोगकर्ता के लिए केवल रिकॉर्ड्स के एक उपसमुच्चय को सक्रिय नोड्स के रूप में रख सकता है। इसलिए, वर्तमान DOM को एक बार पढ़ना पूर्ण लॉजिकल सूची एकत्र करने से भिन्न हो सकता है।

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

स्क्रैपलेस एजेंट ब्राउज़र में व्यूपोर्ट योजना

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

समर्थित ऑटोमेशन क्लाइंट के माध्यम से इच्छित लेआउट सेट करें, फिर वास्तविक पेज का निरीक्षण करें। उस स्थिति में रेस्पॉन्सिव कंट्रोल्स, स्क्रीनशॉट क्षेत्र, और दिखाई देने वाले रिकॉर्ड्स की पुष्टि करें। केवल स्क्रीन-चौड़ाई वाले मान से मोबाइल व्यूपोर्ट मान लेने से बचें।

The Node.js प्रबंधित-ब्राउज़र चर्चा दूरस्थ ब्राउज़र को नियंत्रित करने से संबंधित पृष्ठभूमि प्रदान करता है। समीक्षा करें स्क्रैपलेस योजनाएँ पूर्ण रेंडरिंग कार्यभार को ध्यान में रखते हुए, जिसमें ब्राउज़र के जीवनकाल और कैप्चर आवश्यकताएँ शामिल हैं।

निष्कर्ष

एक viewport यह निर्धारित करता है कि कोई ब्राउज़र दस्तावेज़ के किसी हिस्से को कैसे लेआउट या प्रस्तुत करता है। ऑटोमेशन कॉन्फ़िगर करते समय लेआउट स्पेस, दृश्य क्षेत्र, पिक्सेल घनत्व और दस्तावेज़ के विस्तार के बीच अंतर करें। स्थिर viewport सेटिंग्स और स्पष्ट कैप्चर शर्तें स्क्रीनशॉट, इंटरैक्शन और निकाले गए रिकॉर्ड्स की तुलना को आसान बनाती हैं।