मोबाइल पर उच्च-रिज़ॉल्यूशन वाली छवियों के लिए सीएसएस और रेटिना प्रदर्शित करता है

Question

मेरी वेबसाइट छवियां रेटिना डिस्प्ले वाले उपयोगकर्ताओं के लिए धुंधली लगती हैं। (उदाहरण के लिए, रेटिना मैकबुक प्रो पर)।

मैं रेटिना डिस्प्ले वाले विज़िटर को उच्च-रिज़ॉल्यूशन वाली छवियों की सेवा कैसे करूं, लेकिन छवियों को समान आकार में रखते हुए, सभी के लिए मानक आकार वाली छवियां कैसे?

Answer 1

अपने HTML में, इतना की तरह एक <div> बनाएँ:

<div class="ninjas-image"></div> 

और अपने सीएसएस में, जोड़ें:

.ninjas-image { 
    background-image: url('ninja-devices.png'); 
    width: 410px; 
    height: 450px; 
} 

@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { 
    .ninjas-image { 
    background-image: url('ninja-devices@2x.png'); 
    background-size: 410px 450px; 
    } 
} 

जादू यहाँ सीएसएस @media क्वेरी में है। हमारे पास एक डबल आकार की छवि (ninja-devices@2x.png) है जो हम उप-इन करते हैं जब डिवाइस 1.5 (144 डीपीआई) या उससे अधिक के 'डिवाइस पिक्सेल अनुपात' की रिपोर्ट करता है। ऐसा करने से आप मूल, छोटी छवि को गैर-रेटिना उपकरणों तक पहुंचाकर बैंडविड्थ पर सहेज सकते हैं, और निश्चित रूप से यह रेटिना उपकरणों पर बहुत अच्छा लग रहा है।

नोट:

इस उत्तर 2016 में अद्यतन किया गया था सबसे अच्छा अभ्यास को प्रतिबिंबित करने के। min-device-pixel-ratio इसे मानक में नहीं बनाया गया है। इसके बजाए, min-resolution मानक में जोड़ा गया था, लेकिन डेस्कटॉप और मोबाइल सफारी लेखन के समय इसका समर्थन नहीं करते हैं, (इस प्रकार -webkit-min-device-pixel-ratio फ़ॉलबैक)। आप नवीनतम जानकारी यहां देख सकते हैं: http://caniuse.com/#feat=css-media-resolution। -

Answer 2

हम कई मामलों को संभालने के लिए जहां अनुपात 1.5 या अधिक है निम्न का उपयोग कर इस खाते में अधिक उपकरणों और ब्राउज़र लेता है:

@media only screen and (-webkit-min-device-pixel-ratio: 1.5), 
    only screen and (-o-min-device-pixel-ratio: 3/2), 
    only screen and (min--moz-device-pixel-ratio: 1.5), 
    only screen and (min-device-pixel-ratio: 1.5) { 

हम हमारी पूरी साइट रेटिना सक्षम: http://www.embraceware.com/