DOM वैल्यू "window.devicePixelRatio" और CSS गुण "डिवाइस-पिक्सेल-अनुपात" वेरिएबल बन जाएंगे

2010 की गर्मियों में iPhone 4 की बिक्री शुरू होने के बाद दो साल से अधिक समय बीत चुका है, और पिछले दो वर्षों में, साइट बिल्डरों window.devicePixelRatio (या डिवाइस-पिक्सेल-अनुपात मीडिया क्वेरी का उपयोग सीएसएस में) जावास्क्रिप्ट के साथ एक सरल और सरल तरीके से तुरंत पता लगाने के लिए करने के लिए आदी हैं। साइट रेटिना डिस्प्ले पर चल रही है या नहीं। यदि डिवाइसपिक्सेलरोटो का मूल्य दो है , तो हमारे पास एक रेटिना डिस्प्ले (चौथा आईफोन, चौथा आईपॉड टच, तीसरा आईपैड, या नए डिवाइस, या एक मैकबुक प्रो रेटिना डिस्प्ले लैपटॉप के साथ) है; यदि devicePixelRatio का मान एक (या परिभाषित नहीं) के बराबर है, तो हमारे पास एक सामान्य परिभाषा डिस्प्ले है।

ऐप्पल के मुकाबले, एंड्रॉइड पर चलने वाले उपकरणों को ध्यान में रखना थोड़ा अधिक जटिल है: वहां आपको भिन्नात्मक मूल्यों को समझना होगा जो एक या दो के बराबर नहीं हैं। पीटर-पॉल कोच ने एक ब्लॉग पोस्ट " डिवाइसपिक्सलराटियो के बारे में अधिक " में कहा कि (नेक्सस में उनकी टिप्पणियों के अनुसार) डिवाइसपिक्सेलरैटो का मूल्य 1.5 है , जबकि गैलेक्सी नेक्सस और गैलेक्सी नोट में यह वेबकीट में दो और 2.25 में है। ओपेरा मोबाइल।

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

लेकिन नवंबर 2012 आया, और यह इस आदत को छोड़ने का समय है , यह पुराने व्यंजनों की गंभीर रूप से समीक्षा करने का समय है। मैं आपको बताऊंगा कि क्यों।

पहली बार घंटी बजी जब पीटर-पॉल कोच ने अपने ब्लॉग पोस्ट को " DevicePixelRatio के बारे में अधिक " अपडेट किया और एक पोस्टस्क्रिप्ट में लिखा कि उसने पहले हाथ से देखा था: ओपेरा मोबाइल के ब्राउज़र में डिवाइसपिक्लराटियो का मान ज़ूम (ज़ूम) पर निर्भर करता है ।

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

तीसरी और आखिरी कॉल तब हुई जब W3C प्रतिभागियों ने, " ज़ूम के तहत डिवाइस-पिक्सेल-अनुपात का व्यवहार " पर अक्षरों में www- शैली मेलिंग सूची के भीतर, आखिरकार सहमति व्यक्त की (एक सप्ताह से भी कम समय पहले) कि डिवाइस की कीमत PelelRatio भौतिक की संख्या से निर्धारित होती है (स्क्रीन ) पृष्ठ के सीएसएस-पिक्सेल प्रति पिक्सेल - और यह कैसे प्राप्त किया गया था (क्या रेटिना डिस्प्ले को एम्बेड करके या बस कीबोर्ड पर Ctrl- + दबाकर) किसी को परेशान नहीं करना चाहिए।

सभी, सज्जनों, पाठकों। आप हमेशा के लिए भूल सकते हैं कि DevicePixelRatio का एक स्थिर मान है जो किसी विशेष उपकरण के लिए विशिष्ट है। यह सच नहीं है - या बल्कि, अब यह हमेशा सच नहीं है।

यह स्पष्ट है कि ऐसी खबरों के दो पहलू हैं - अच्छा और बुरा।

संभवतः सभी साइट बिल्डरों को इस बात की खुशी नहीं होगी कि किसी डिवाइस को उसके मान डिवाइस प्रिक्सपैलरियो द्वारा पहचानने के पिछले प्रयास हमेशा भविष्य में सफल नहीं होंगे।

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

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

हम आशा कर सकते हैं कि भविष्य में साइट निर्माण की इस विशेष बारीकियों को और भी सरल बनाया जाएगा यदि छवि-सेट संपत्ति के लिए फरवरी का प्रस्ताव स्वीकार कर लिया जाए :

selector { background: image-set(url(foo-lowres.png) 1x, url(foo-highres.png) 2x) center; } 

यह उल्लेख करना असंभव नहीं है कि WebKit ने इसे मार्च में वापस लाया ।

यह प्रेरणादायक है। भविष्य उज्ज्वल दिखाई देने लगता है।

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