What है डिवाइस पिक्सेल अनुपात?

क्यों एक CSS पिक्सेल एक हार्डवेयर पिक्सेल नहीं है

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

वेब ऑटोमेशन के लिए व्यावहारिक प्रश्न हमेशा “क्या पृष्ठ तैयार है?” या “क्या ब्राउज़र असली दिखता है?” से संकीर्ण होता है। अगला कदम एक नियंत्रण को सक्षम करने, एक फ़्रेम को नेविगेशन पूरा करने, एक घटक के आंतरिक पेड़ को जोड़ने, या एक रेंडरिंग सतह को लगातार बनाए रखने की आवश्यकता हो सकती है। नीचे की श्रंखलाएँ अवधारणा को प्रेक्षणीय जांचों में बदल देती हैं, न कि लोककथाओं पर निर्भर करते हुए।

कोर डिवाइस पिक्सेल अनुपात सूत्र

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

यह MDN devicePixelRatio संदर्भ निषेध करता है कि यह भौतिक-पिक्सेल रिज़ॉल्यूशन और CSS-पिक्सेल रिज़ॉल्यूशन का अनुपात है। ब्राउज़र इसे window.devicePixelRatio के माध्यम से एक तैरता अंक मूल्य के रूप में उजागर करता है। मान पूरे नंबरों में नहीं होने की आवश्यकता नहीं है क्योंकि ऑपरेटिंग-सिस्टम स्केलिंग और पृष्ठ ज़ूम अंशात्मक परिणाम उत्पन्न कर सकते हैं।

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

CSS पिक्सेल, डिवाइस पिक्सेल, और रिज़ॉल्यूशन

स्क्रीन रिज़ॉल्यूशन आमतौर पर भौतिक पिक्सेल में चौड़ाई और ऊँचाई के रूप में वर्णित किया जाता है। CSS व्यू पोर्ट आकार तार्किक पिक्सेल में वर्णित होता है। डिवाइस पिक्सेल अनुपात उन्हें जोड़ता है, लेकिन ब्राउज़र क्रोम, ऑपरेटिंग-सिस्टम स्केलिंग, ओरिएंटेशन, और राउंडिंग का अर्थ है कि एक सरल गुणा हमेशा हर स्क्रीन मान को ठीक से पुन: उत्पन्न नहीं करता।

घनत्व भौतिक लंबाई प्रति भौतिक पिक्सेल है, जबकि DPR एक ब्राउज़र स्केलिंग अनुपात है। दो स्क्रीन एक रिज़ॉल्यूशन साझा कर सकते हैं लेकिन भौतिक आकार में भिन्न होते हैं और इसलिए विभिन्न घनत्व होते हैं। दो ब्राउज़र विभिन्न अंतर्निहित घनत्व वाले उपकरणों पर एक ही DPR को भी उजागर कर सकते हैं क्योंकि ऑपरेटिंग सिस्टम पढ़ने योग्य UI के लिए उपयुक्त स्केल चुनता है।

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

क्यों ज़ूम चित्र बदलता है

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

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

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

DPR कैनवास, छवियों, और स्क्रीनशॉट में

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

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

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

डिवाइस पिक्सेल अनुपात एक फिंगरप्रिंट सिग्नल के रूप में

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

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

प्राधिकृत ऑटोमेशन के लिए, उपकरण प्रोफाइल को सुसंगत सेट के रूप में चुनें। दृश्यपटल, स्क्रीन आयाम, DPR, उन्मुखीकरण, इनपुट क्षमताएँ, स्थान, और उपयोगकर्ता एजेंट को एक साथ परिभाषित करें। सत्र के लिए उन्हें स्थिर रखें। यदि लक्ष्य उत्तरदायी परीक्षण है, तो ऊँचाई और DPR संयोजनों का उत्पादन करने के बजाय नामित प्रोफाइल के छोटे मैट्रिक्स का परीक्षण करें जो कोई असली डिस्प्ले सामान्यतः उपयोग नहीं करता।

लेआउट और दृश्य-टेस्ट समस्याओं की डीबगिंग

जब एक स्क्रीनशॉट भिन्न होता है, तो सबसे पहले window.devicePixelRatio, दृश्यपटल आयाम, स्क्रीन आयाम, पृष्ठ ज़ूम, और स्क्रीनशॉट बिटमैप आकार को रिकॉर्ड करें। निर्धारित करें कि क्या अंतर एक लेआउट परिवर्तन है या केवल एक रास्टराइजेशन परिवर्तन है। एक CSS बॉक्स समान तार्किक आकार पर कब्जा कर सकता है जबकि इसके किनारे भिन्न संख्या में भौतिक पिक्सेल का उपयोग करते हैं।

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

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

दोहराने योग्य डिस्प्ले प्रोफाइल चुनना

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

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

निष्कर्ष

डिवाइस पिक्सेल अनुपात ब्राउज़र के CSS समन्वय प्रणाली को भौतिक डिस्प्ले पिक्सेल से जोड़ता है। यह रास्टर गुणवत्ता, कैनवास बैकिंग स्टोर्स, उत्तरदायी संपत्तियों, स्क्रीनशॉट, और फिंगरप्रिंट स्थिरता को प्रभावित करता है, लेकिन यह रिज़ॉल्यूशन या भौतिक घनत्व का विकल्प नहीं है। विश्वसनीय ऑटोमेशन दृश्यपटल और स्क्रीन सेटिंग्स के साथ DPR को रिकॉर्ड करता है और पूरे डिवाइस प्रोफाइल को सुसंगत रखता है।

यह Scrapeless Scraping Browser दस्तावेज़ बताता है कि प्रबंधित ब्राउज़र सत्र कैसे कॉन्फ़िगर किए जाते हैं, जबकि Scraping Browser उत्पाद समीक्षा ब्राउज़र ऑटोमेशन सतह का वर्णन करता है। ये संसाधन अधिकृत कार्यप्रवाह में अवधारणा लागू करने के लिए उत्पाद संदर्भ प्रदान करते हैं।

संदर्भ

• स्क्रेपलेस स्क्रैपिंग ब्राउज़र गेटिंग-स्टार्टेड दस्तावेज़
• स्क्रेपलेस स्क्रैपिंग ब्राउज़र उत्पाद अवलोकन
• स्क्रेपलेस कैनवास रेंडरिंग और फिंगरप्रिंटिंग गाइड
• स्क्रेपलेस ओपन-सोर्स प्रोजेक्ट्स ऑन गिटहब