रेटिना स्क्रीन के लिए ग्राफिक्स को अपनाना

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

हालाँकि, अभी हाल ही में, Apple ने हमें एक iPad 3 दिया था जिसमें एक छोटी सी शुरुआत की जा रही थी ताकि चीजें जा सकें। IPad को पहले से ही अपनी पूरी क्षमता के लिए उपयोग किया जा रहा है, इसलिए साइटों को इसे लैपटॉप या डेस्कटॉप कंप्यूटर पर नहीं देखना चाहिए। और मुझे विश्वास है कि iPad 3 एक ही लैपटॉप में रेटिना स्क्रीन के पूर्ण कार्यान्वयन की दिशा में पहला कदम है, और उनके पीछे स्थिर मॉनिटर है। Apple रेटिना के लिए अपना ओएस पहले से ही तैयार कर रहा है, विंडोज 8 में इंटरफ़ेस डिज़ाइन के अपने नए दृष्टिकोण के साथ, या तो इसकी कोई समस्या नहीं होगी।


अब जब आप यहाँ हैं, तो हम सीधे उच्च पिक्सेल घनत्व वाले स्क्रीन पर ग्राफ़िक्स को अपनाने के बहुत तरीकों पर सीधे जाएँगे।

विधि 1. एसवीजी का उपयोग करना

.selector { background: url(../path_to_png/apple.png) no-repeat; } html.svg .selector { background-image: url(../path_to_svg/apple.svg); } 

लोगो, प्रतीक, साथ ही किसी भी वेक्टर ग्राफिक्स के लिए आदर्श।

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

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

विधि 2: CSS मीडिया क्वेरी और पृष्ठभूमि-आकार गुण

 .selector { background: url(../path_to_png/apple.png) no-repeat; } @media (-webkit-min-device-pixel-ratio: 2) { .selector { background-image: url(../path_to_png/apple@2x.png); background-size: cover; } } 

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

विधि 3. तस्वीरों में src की जगह

 jQuery( document ).ready(function(){ if( 'devicePixelRatio' in window && window.devicePixelRatio == 2 ){ var img_to_replace = jQuery( 'img.replace-2x' ).get(); for (var i=0,l=img_to_replace.length; i<l; i++) { var src = img_to_replace[i].src; src = src.replace(/\.(png|jpg|gif)+$/i, '@2x.$1'); img_to_replace[i].src = src; }; } }); 

HTML कोड में, हम <img> टैग के लिए आवश्यक वर्ग, चौड़ाई या ऊंचाई असाइन करते हैं ताकि बढ़े हुए चित्र डिजाइन को खराब न करें।

 <img src="../path_to_png/apple.png" width="200" height="200" class="replace-2x" /> 

यह विधि एक बढ़ी हुई घनत्व के साथ एक स्क्रीन का निर्धारण करने के लिए window.devicePixelRatio संपत्ति का उपयोग करती है, उन सभी चित्रों को ढूंढती है जिन्हें अनुकूलित करने की आवश्यकता होती है और उनके src को एक समान रूप से प्रतिस्थापित करता है, लेकिन "@ 2x" के अतिरिक्त के साथ। यदि आप प्रत्येक चित्र के लिए एक वर्ग लिखना नहीं चाहते हैं, तो ऊपर दिए गए कोड को संशोधित करना काफी सरल है ताकि यह किसी भी चित्र को ढूंढ सके। मेरी राय में, यह तरीका सबसे अच्छा नहीं है और मैं इसे अत्यधिक सावधानी के साथ उपयोग करूंगा।

विधि 4. कुकीज़ और ऑफ-सर्वर समाधान

 (function(){ if( document.cookie.indexOf('device_pixel_ratio') == -1 && 'devicePixelRatio' in window && window.devicePixelRatio == 2 ){ document.cookie = 'device_pixel_ratio=' + window.devicePixelRatio + ';'; window.location.reload(); } })(); 

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


और अंत में, डेमो के लिए एक लिंक , रेटिना स्क्रीन वाले उपकरणों के केवल मालिकों को अंतर दिखाई देगा।

अंत में

अपने पृष्ठ पर बटन, छाया, ग्रेडिएंट और अन्य तत्वों को बनाने के लिए CSS की शक्ति को अधिकतम करने का प्रयास करें। ऐसे तत्व किसी भी पैमाने और पिक्सेल घनत्व पर बहुत अच्छे लगते हैं, लेकिन पुराने ब्राउज़रों के लिए सुंदर गिरावट के बारे में मत भूलना।

मुझे आपकी उन समस्याओं के बारे में सुनकर खुशी होगी जो आपके द्वारा रेटिना स्क्रीनों और उन समाधानों को अपनाने के दौरान हुई थीं जो मुझे याद थे।