रेटिना डिस्प्ले वाले उपयोगकर्ताओं के लिए साइट पर बड़ी छवियां - retina.js

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

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

और यहाँ बड़ा आईपैड आता है!




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

एक समाधान है, और इसे पूरी तरह से साइटों को फिर से डिज़ाइन करने की आवश्यकता नहीं होगी, केवल मामूली संशोधन की आवश्यकता होगी।

सबसे पहले, हमारे विदेशी सहयोगियों ने कानून के पत्र के आधार पर, आईओएस के लिए ड्राइंग और प्रिंटिंग गाइड , जहां उच्च-रिज़ॉल्यूशन छवियों ( @2x ) को प्रदर्शित करने के लिए स्वचालित समर्थन है, के आधार पर हाइरेज़-इमेज देने के कार्य से संपर्क किया। यह केवल इन बड़े चित्रों को प्रदान करने और यह कहने के लिए आवश्यक है कि वे हैं। बेशक, बड़ी छवियां केवल तभी डाउनलोड की जाएंगी जब उनके लिए कोई आवश्यकता हो, लगभग 72dpi के रिज़ॉल्यूशन वाले साधारण और परिचित डिवाइस के उपयोगकर्ता व्यर्थ चित्रों को व्यर्थ में डाउनलोड नहीं करेंगे।

दूसरी बात, उन्होंने इस समस्या को सहज रूप से हल किया, और दो तरीकों से भी।

जावास्क्रिप्ट के लिए

यह रेटिना.जेएस (1.63 Kb) सर्वर पर अपलोड करने और दस्तावेज़ के शरीर को पूरा करने के लिए समापन टैग से दूर, पाद लेख में कॉल करने का प्रस्ताव है। कॉल मानक है:

  <script type = "text / javascript" src = "/ script / retina.js"> </ script> 

लेस के लिए

अनावश्यक स्पष्टीकरणों के बिना स्पष्ट वाक्य विन्यास, का आविष्कार किया गया था:
.at2x(@path, [optional] @width: auto, [optional] @height: auto);

आपको http://retinajs.com/ से संग्रह से retina.less फ़ाइल में समाहित कोड का एक टुकड़ा (अपनी लेस स्टाइल शीट में) कनेक्ट करने की आवश्यकता है और फिर संरचनाओं की पूरी शक्ति का उपयोग करें:

#something
{ .at2x('/images/image.png', 200px, 100px); }


विभिन्न प्रकार के डिस्प्ले के लिए अपने उपलब्ध छवि विकल्पों को प्रदर्शित करने के लिए चमत्कारिक रूप से विस्तृत निर्देशों में बदलना:

#something
{ background-image: url('/images/image.png');
}
@media all and (-webkit-min-device-pixel-ratio: 1.5) {
#something {
background-image: url('/images/image@2x.png');
background-size: 200px 100px;
}
}

परिणाम

उदाहरण के लिए, आपके पास पृष्ठ पर एक दिलचस्प तस्वीर है:

  <img sr = "/ images / boobs.png" /> 

आउटपुट पर, स्क्रिप्ट यह जांच करेगी कि क्या कोई बड़ी तस्वीर "/images/boobs@2x.png" , और अगर वहाँ है (और आप एक स्क्रीन के साथ हैं जो उच्च भौतिक रिज़ॉल्यूशन का समर्थन करता है), तो वह इसे प्रदर्शित करेगा।