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

Katie Hempenius

इस डेमो को एक्सप्लोर करें

• साइट की झलक देखने के लिए, ऐप्लिकेशन देखें दबाएं. इसके बाद, फ़ुलस्क्रीन .
• ब्राउज़र के लोड होने की स्थिति देखने के लिए, अलग-अलग डिवाइसों का इस्तेमाल करके पेज को फिर से लोड करें इमेज.

इसके लिए, डिवाइस एम्युलेटर का इस्तेमाल किया जा सकता है. अगर आपको किसी खास डिसप्ले की तलाश है घनत्व, तो इन्हें आज़माएँ. इसके लिए यहाँ कुछ डिवाइस दिए गए हैं:

• यह कोड काम करने वाले कोड के लिए, index.html को चेकआउट करें.

यह कैसे काम करता है?

सघनता डिस्क्रिप्टर का सिद्धांत शायद ज़्यादातर लोगों को न पता हो. बेहतर करने के लिए इन कामों को करने से, ब्राउज़र के काम करने के तरीके के बारे में थोड़ी-बहुत जानकारी मिलती है पिक्सल के साथ.

पिक्सल क्या होते हैं

चलिए, पिक्सल तय करके शुरुआत करते हैं. यह आवाज़ सुनाई देगी आसान, लेकिन "पिक्सल" असल में, इसके कई मतलब हो सकते हैं:

डिवाइस पिक्सल (यानी "फ़िज़िकल पिक्सल")

किसी डिवाइस पर दिखाया जा सकने वाला सबसे छोटा रंग का बिंदु.

लॉजिकल पिक्सल

वह जानकारी जो ग्रिड पर किसी खास जगह का रंग बताती है. इस तरह के पिक्सल का साइज़ पहले से तय नहीं होता.

सीएसएस पिक्सल

सीएसएस की खास जानकारी में, पिक्सल को फ़िज़िकल मेज़रमेंट की इकाई के तौर पर बताया गया है. 1 पिक्सल = इंच का 1/96वां हिस्सा.

पिक्सल की डेंसिटी

पिक्सल डेंसिटी (इसे "स्क्रीन डेंसिटी" या "डिसप्ले डेंसिटी" भी कहा जाता है) किसी दिए गए फ़िज़िकल एरिया में डिवाइस के पिक्सल का घनत्व मापता है. यह है इसे आम तौर पर पिक्सल प्रति इंच (पीपीआई) का इस्तेमाल करके मापा जाता है.

कई सालों तक, 96 ppi एक आम डिसप्ले सघनता थी (इसलिए, CSS (इंच का 1/96वां हिस्सा). 1980 के दशक की शुरुआत से यह डिफ़ॉल्ट रिज़ॉल्यूशन था Windows के लिए. इसके अलावा, यह CRT का रिज़ॉल्यूशन था मॉनिटर करते हैं.

इसमें बदलाव होने लगा, क्योंकि 2000 के दशक में एलईडी मॉनिटर का इस्तेमाल आम हो गया. खास तौर पर, साल 2010 में, जब Apple ने रेटिना डिसप्ले की सुविधा लॉन्च की, तो इसने काफ़ी कमाल कर दिया. ये डिसप्ले का कम से कम रिज़ॉल्यूशन 192 पीपीआई था, जो कि रिज़ॉल्यूशन के दोगुना था "सामान्य" डिस्प्ले (192 ppi/96 ppi = 2).

window.devicePixelRatio

नई डिसप्ले टेक्नोलॉजी, "डिवाइस पिक्सल" के आने से इसमें बदलाव आने लगे भौतिक आकार और आकार में और अब इसका साइज़ "CSS पिक्सल" के बराबर नहीं था. यह तय करने की ज़रूरत है कि "डिवाइस पिक्सल" के साइज़ के बीच संबंध और "सीएसएस पिक्सल" की वजह से devicePixelRatio (इसे कभी-कभी "CSS Pixel" भी कहा जाता है) का परिचय अनुपात").

devicePixelRatio से डिवाइस के पिक्सल और सीएसएस पिक्सल के बीच संबंध के बारे में पता चलता है एक खास डिवाइस के लिए. 192 पीपीआई वाले डिवाइस में, 2 में से devicePixelRatio (192) है ppi/96 ppi = 2) के लिए उपलब्ध है, क्योंकि "इसके दो डिसप्ले पिक्सल एक सीएसएस पिक्सल के साइज़ के हैं".

आज-कल ज़्यादातर डिवाइसों में, डिवाइस पिक्सल का अनुपात 1.0 से 4.0 के बीच होता है.

• window.devicePixelRatio टाइप करके, किसी डिवाइस की पिक्सल डेंसिटी पता करें पर क्लिक करें.

• इसके पिक्सल रेशियो देखने के लिए, यह टेबल देखें सामान्य डिवाइस. अधिकांश 1.0 और 4.0 के बीच होते हैं.

असल में, इस जानकारी को कैसे लागू किया जा सकता है?

डिवाइस-पिक्सल-अनुपात के आधार पर इमेज का साइज़ तय करें

उच्च रिज़ॉल्यूशन वाली स्क्रीन पर छवियों को बहुत अच्छे से दिखाने के लिए, अलग-अलग devicePixelRatios के लिए अलग-अलग इमेज के वर्शन देना ज़रूरी है.

इन बातों का ध्यान रखें:

• इमेज एडिटर, फ़ाइल डायरेक्ट्री, और अन्य स्थान लॉजिकल पिक्सल की माप होते हैं.
• ज़्यादा रिज़ॉल्यूशन वाली स्क्रीन और बड़े डिसप्ले के लिए, आपको ऐसी इमेज की ज़रूरत होगी जिनमें बड़े डाइमेंशन. छोटी-छोटी इमेज को सिर्फ़ बड़ा करके देखने का मकसद खत्म हो जाता है इमेज के कई वर्शन दिखाता है. ब्राउज़र ऐसा ही कर सकता, अगर हाई रिज़ॉल्यूशन वाली इमेज नहीं दी गई है.

एक से ज़्यादा
इमेज दिखाने के लिए, डेंसिटी डिस्क्रिप्टर का इस्तेमाल करें

"srcset " एट्रिब्यूट की वैल्यू है. इसका इस्तेमाल अलग-अलग डिवाइसPixelRatios पर अलग-अलग इमेज दिखाएं.

• index.html फ़ाइल पर एक नज़र डालें और <img> एलिमेंट को नोट करें.

<img src="flower.jpg"
  srcset="flower-1x.jpg 1x,
          flower-2x.jpg 2x,
          flower-3x.jpg 3x">

यह उदाहरण शब्दों में बताया गया है:

• 1x, 2x, और 3x ये सभी सघनता डिस्क्रिप्टर हैं, जो ब्राउज़र को बताते हैं पिक्सल की डेंसिटी, जिसके लिए इमेज को तैयार किया गया है. इससे ब्राउज़र सेव हो जाएगा इस जानकारी को तय करने के लिए कोई इमेज डाउनलोड नहीं करनी पड़ती.
• ब्राउज़र तीन इमेज में से चुन सकता है: flower-1x.jpg (उम्मीद के मुताबिक) 1.0 पिक्सल की सघनता वाले ब्राउज़र के लिए, flower-2x.jpg (इसके लिए बनाया गया है) 2.0 पिक्सल डेंसिटी वाले ब्राउज़र और flower-3x.jpg (इसके लिए बनाया गया है) 3.0 पिक्सल सघनता वाले ब्राउज़र).
• flower.jpg उन ब्राउज़र के लिए फ़ॉलबैक इमेज है जो srcset.

इसका इस्तेमाल कैसे करें:

• सघनता वाले डिस्क्रिप्टर लिखने के लिए, devicePixelRatio और x यूनिट का इस्तेमाल करें. इसके लिए उदाहरण के लिए, कई रेटिना स्क्रीन के लिए डेंसिटी डिस्क्रिप्टर (window.devicePixelRatio = 2) को 2x के रूप में लिखा जाएगा.
• अगर सघनता डिस्क्रिप्टर नहीं दिया गया है, तो इसे 1x माना जाता है.
• फ़ाइल नामों में डेंसिटी डिस्क्रिप्टर को शामिल करना आम बात है (और यह से आपको फ़ाइलों का ट्रैक रखने में सहायता मिलती है) लेकिन यह ज़रूरी नहीं है. इमेज में कोई भी इमेज हो सकती है फ़ाइल नाम.
• sizes एट्रिब्यूट को शामिल करने की ज़रूरत नहीं है. सिर्फ़ sizes एट्रिब्यूट इसका इस्तेमाल चौड़ाई डिस्क्रिप्टर के साथ किया जाता है.