पिक्सेल आइडेंटिटी क्राइसिस

पिक्सेल हमेशा डिजिटल डिज़ाइन में सबसे छोटी इकाई रही है। यह डिजाइनरों के लिए एक अदृश्य उपाय है। वाक्यांश "पिक्सेल पिक्सेल पिक्सेल" प्रिंट डिजाइनरों की मदद करने के लिए अपनाया गया था ताकि वे एक निश्चित स्क्रीन घनत्व की अवधारणा को समझ सकें। वेब डिजाइनर, बदले में, डॉट्स के बजाय पिक्सेल को अपनाया।

अब जब तकनीक में तेजी से सुधार हो रहा है और पीपीआई लगातार बढ़ रहा है, तो यह निश्चित सापेक्ष मूल्य खोजने के लिए आवश्यक हो गया है जो हमेशा स्थिर रहेगा। यह मान कभी पिक्सेल था। ब्राउज़र में पृष्ठ की स्केलेबिलिटी एक पूरी तरह से अलग बात है, जिसे QuirksMode पर पढ़ा जाता है । उच्च रिज़ॉल्यूशन स्क्रीन पर एक पिक्सेल क्या है? ब्राउज़र में दिखाए गए iPhone 4 पर 640px × 960px के रिज़ॉल्यूशन के साथ एक तस्वीर 320px × 480px के रूप में क्यों है? सच्चाई यह है कि पिक्सल की दो अवधारणाएँ हैं: वे स्क्रीन पर सबसे छोटी भौतिक इकाइयाँ (हार्डवेयर पिक्सल) हो सकती हैं, या वे एक ऑप्टिकल इकाई हो सकती हैं - एक संदर्भ पिक्सेल।

हार्डवेयर पिक्सेल

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

संदर्भ पिक्सेल और अलग परमाणु

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

संदर्भ पिक्सेल अद्भुत हैं, लेकिन अब हमारे पास दो परस्पर विरोधी परिभाषाएं हैं। Android उपकरणों का अपना मूल्य होता है , जिसे घनत्व स्वतंत्र पिक्सेल (डिप) कहा जाता है। इस मूल्य का उपयोग डेवलपर्स द्वारा स्क्रीन पर एक तत्व द्वारा कब्जा किए गए ऑप्टिकल पिक्सल की संख्या निर्धारित करने के लिए किया जाता है। यह आपको px का उपयोग करके सही ढंग से प्रदर्शित ग्राफिक्स बनाने के लिए हार्डवेयर पिक्सल का उपयोग करने की अनुमति देता है और पाठ का आकार सेट करने के लिए एक सापेक्ष मूल्य। ये सार्वभौमिक मूल्य सभी उपकरणों के लिए काम करते हैं, उनके प्रदर्शन के मापदंडों की परवाह किए बिना। एंड्रॉइड ने "पिक्सेल" की परिभाषा को दो अन्य लोगों में विभाजित करके यथोचित कार्य किया, लेकिन वेब एक हार्डवेयर पिक्सेल के आधार पर वर्षों में बनाई गई सामग्री से संबंधित है। वेब डिजाइनरों के लिए समान मूल्य रखना बहुत अच्छा होगा। लेकिन परिभाषा के रूप में पिक्सेल के पूर्ण संशोधन के बिना, इसके आधार पर एक वेब गिर सकता है। मोबाइल डिवाइस आमतौर पर स्क्रीन की चौड़ाई के लिए वेबसाइटों की चौड़ाई को संकुचित करते हैं, इसलिए पाठ पूरी तरह से अपठनीय हो जाता है। ज़ूम ब्लॉकिंग साइट्स तुरंत बेकार हो जाती हैं।


गैलेक्सी टैब और किंडल फायर पर मानक पिक्सेल आकार।

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

ब्रेक पॉइंट को परिभाषित करना और आगे बढ़ना

हम विश्वास के साथ कह सकते हैं कि पिक्सल अभी सबसे अच्छी स्थिति में नहीं हैं। लेकिन हम विसंगतियों की पहचान करने और उन्हें सही करने के लिए मीडिया क्वेरी का उपयोग कर सकते हैं। मीडिया क्वेरी डिवाइस-पिक्सेल-अनुपात का उपयोग करके, "गैर-मानक" पिक्सेल वाले डिवाइस की पहचान करना संभव है। आप इस संपत्ति को अधिक सटीक परिभाषा के लिए विशिष्ट अनुमतियों के साथ भी जोड़ सकते हैं। iPhone 4 में एक डिवाइस-पिक्सेल-अनुपात दो है, अर्थात, इसका पिक्सेल हार्डवेयर पिक्सल से दोगुना बड़ा है। अधिकांश Android उपकरणों में हार्डवेयर के आकार का 1.5 गुना पिक्सेल होता है। कितनी बार "काल्पनिक" पिक्सेल हार्डवेयर पिक्सेल से अधिक हैं, इसलिए कई बार स्क्रीन पर छवि होगी। उपकरणों के वर्ग का निर्धारण करने में विशिष्टता एक महत्वपूर्ण कारक है। लेकिन उनमें से प्रत्येक के लिए डिवाइस परिभाषा मापदंडों को निर्दिष्ट करने के लिए इतना विशिष्ट नहीं है। अधिकांश उपकरणों में समान समस्याएं हैं। मीडिया क्वेरीज़ का उपयोग करके, हम "काल्पनिक" पिक्सेल के आकार, स्क्रीन की चौड़ाई और ऊंचाई आदि के आधार पर उपकरणों की पहचान कर सकते हैं। आप डिवाइस की वर्तमान अभिविन्यास (चित्र या परिदृश्य) भी निर्धारित कर सकते हैं:

@media screen and (device-pixel-ratio: 1.5)
and (device-width: 683px)
and (orientation: landscape),
screen and (device-pixel-ratio: 1.5)
and (device-width: 400px)
and (orientation: portrait)

ध्यान दें कि मीडिया क्वेरी डिवाइस-पिक्सेल-अनुपात में अभी भी विक्रेता उपसर्गों के उपयोग की आवश्यकता है।

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

@media screen and (device-pixel-ratio: 1)
and (device-width: 1024px)
and (max-device-height: 600px)
and (orientation: landscape),
screen and (device-pixel-ratio: 1)
and (device-width: 600px)
and (max-device-height: 1024px)
and (orientation: portrait)


गैलेक्सी टैब और किंडल फायर पर सामान्यीकृत पिक्सेल।

अपनी वेबसाइट के आकार पर अधिक नियंत्रण के लिए, आप उन्हें माप के रूप में उपयोग कर सकते हैं, यह न केवल पाठ पर लागू होता है, बल्कि पीएक्स में मापी गई हर चीज पर लागू होता है। अब आपको फ़ॉन्ट आकार सेट करने की आवश्यकता है। किंडल फायर के लिए मीडिया क्वेरी में, आकार को वर्तमान आकार से 1.5 गुना सेट करें। यदि आप गैलेक्सी टैब को हार्डवेयर पिक्सल में प्रदर्शित करने के लिए बाध्य करना चाहते हैं, तो टेक्स्ट का आकार 2/3 गुणा करें और परिणाम को टैब पर मीडिया क्वेरी में लिखें। कोड का एक उदाहरण यहां पाया जा सकता है ।

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