UIWebView और आईफोन 4 रेटिना डिस्प्ले

Question

मेरे पास UIWebView है जो कुछ स्थानीय टेक्स्ट और छवियां प्रदर्शित करता है। या तो मैंने कहीं गलती की है, या UIWebView उच्च रिज़ॉल्यूशन छवियों के लिए स्वचालित रूप से @2x प्रत्यय को संभाल नहीं करता है।

तो, मेरे प्रश्न में किसी और ने @2x छवियों को UIWebView में सामान्य माध्यमों से सफलतापूर्वक लोड किया है, या मुझे कुछ विशेष करने की आवश्यकता है? क्या मैं किसी भी तरह से पता लगा सकता हूं कि मेरे उपयोगकर्ता के पास रेटिना डिस्प्ले है या नहीं?

Answer 1

आपके अनुरोध के अनुसार ... कार्यक्षमता के लिए

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

if([[UIScreen mainScreen] respondsToSelector:@selector(scale)] && 
    [[UIScreen mainScreen] scale] == 2.0) 
{ 
    /* We have a retina display. */ 
} 
else 
{ 
    /* We do not. */ 
} 

इस कोड, सुरक्षित है बार मैं सभी मॉडलों पर और सभी फर्मवेयर संस्करणों पर इस ने लिखा है के रूप में ऐसा करने के लिए, आप निम्न नमूना कोड का उपयोग कर सकते हैं। यह भविष्य के संस्करणों पर भी सुरक्षित रहेगा जब तक ऐप्पल scale विधि को बहिष्कृत नहीं करता है, जो कभी नहीं हो सकता है।

आपके प्रश्न पर, मुझे नहीं पता कि वेब पेज में इसे रेटिना छवि और गैर-रेटिना छवि के स्थान के बिना किसी वेबव्यू में कैसे करना है। एक बार मेरे पास यह जानकारी हो जाने के बाद, मैंने (अतीत में) कुछ ज्ञात सेंटीनल टेक्स्ट को प्रतिस्थापित करने के लिए उपयोग किया था, जिस पर वेब पेज ने मुझे प्रतिस्थापित करने की उम्मीद की थी, क्योंकि मैं HTML में कुछ डालूंगा जो कहता था: {{{image_location}}} जहां मैं HTML डाउनलोड कर सकता था डेटा, इसे स्ट्रिंग प्रारूप में प्राप्त करें, फिर उस पाठ को प्रतिस्थापित करने वाली उस स्ट्रिंग पर प्रतिस्थापित करें, @ 2x छवि के यूआरएल के साथ यदि हम रेटिना डिस्प्ले पर हैं, उचित स्केल फैक्टर के साथ, या सामान्य आकार की छवि के साथ नहीं (उपरोक्त कोड का उपयोग कर)।

उम्मीद है कि अगर कोई बेहतर समाधान के साथ आता है तो इससे मदद मिलती है।

Answer 2

पहचान के लिए, आप this code sample का उपयोग कर सकते हैं। मैं सिर्फ यह नवीनीकृत किया है भी iPhone 4.

Answer 3

बस हमेशा कार्य करें:

<img src="image@2x.png" width={half-width} /> 

सीएसएस संदर्भित पृष्ठभूमि छवियों के लिए

, आधे आकार उन्हें -webkit-पृष्ठभूमि आकार का उपयोग करें।

नुकसान: गैर-रेटिना डिवाइस oversized छवियों को डाउनलोड करेंगे।

Answer 4

मुझे लगता है कि यह केवल कुछ उचित चित्र प्रदर्शित करने के लिए कुछ सीएसएस या जावास्क्रिप्ट जादू का उपयोग करके हासिल किया जा सकता है। मुख्य विचार दो तस्वीरें, सामान्य और हाई रिजोल्यूशन डालने के लिए और फिर सीएसएस विशेषता प्रदर्शन स्थापित करने के लिए हैमुखौटा करने के लिए चित्रों के लिए कोई भी रहे हैं:

HTML फ़ाइल

<link href="default.css" rel="stylesheet" media="screen" type="text/css" /> 
<link href="highresolution.css" media="screen and (-webkit-min-device-pixel-ratio:2)" type="text/css" rel="stylesheet" /> 

। ..

<img src="image.png" width="..." height="..." class="normalRes" />  
<img src="image@2x.png" width="..." height="..." class="highRes" /> 

CSS फ़ाइल: डिफ़ॉल्ट।सीएसएस

.normalRes { display:block } /* or anything else */ 
.highRes { display:none } 

CSS फ़ाइल: highresolution.css

.normalRes { display:none } 
.highRes { display:block } /* or anything else */ 

मैं परीक्षण यह एक छोटा सा है और यह अच्छी तरह से काम किया। अब और परीक्षण की आवश्यकता है। मैंने पाया यहाँ समाधान: http://www.mobilexweb.com/blog/iphone4-ios4-detection-safari-viewport

अद्यतन 2012-06-24

यहाँ highresolution.css फ़ाइल के लिए कोई ज़रूरत नहीं के साथ एक और उपाय है।
डिफ़ॉल्ट.css में निम्न कोड जोड़ें।

@media all and (-webkit-min-device-pixel-ratio: 2) { 

    .normalRes { display:none } 
    .highRes { display:block } 

    ... 

Answer 5

सबसे अच्छा समाधान रेटिना और गैर-रेटिना आधारित वेब व्यू दोनों के लिए उच्च-रेज छवियों का उपयोग करना है। फिर चौड़ाई और ऊंचाई विशेषता का उपयोग कर छवि (आकार में) का आकार सेट करें।

<img src="hi-res-icon.png" width="10px" height="10px" /> 

Answer 6

मैं रेटिना डिवाइस पर चलते समय स्केल की गई छवियों को लोड करने के लिए इस जावास्क्रिप्ट हैक का उपयोग करता हूं। यह संबंधित छवियों का उपयोग करने के लिए सभी छवियों पर src और width विशेषता को बदल देगा। ध्यान दें कि मैंने केवल स्थानीय छवियों के साथ इसका परीक्षण किया है।

display: none सेट करना और फिर कुछ झटके को ठीक करने के लिए इसे छवि लोड सीम पर रीसेट करें। यह भी ध्यान रखें कि यह कोड शायद वेबकिट की तुलना में अन्य ब्राउज़रों के साथ संगत नहीं है।

document.addEventListener("DOMContentLoaded", function() { 
    var scale = window.devicePixelRatio; 
    // might want this to be scale != 2 
    if (scale == undefined || scale == 1) { 
    return; 
    } 

    var re = /^(.*)(\..*)$/; 
    var images = document.getElementsByTagName("img"); 
    for (var i = 0; i < images.length; i++) { 
    var img = images[i]; 
    var groups = re.exec(img.src); 
    if (groups == null) { 
     continue; 
    } 

    img.style.setProperty("display", "none"); 
    img.addEventListener("load", function(event) { 
     event.target.width /= scale; 
     event.target.style.setProperty("display", ""); 
    }); 
    img.src = groups[1] + "@" + scale + "x" + groups[2]; 
    } 
}); 

युक्तियाँ इसे एक फ़ाइल में जोड़ना है उदा। scaledimages.js और उसके बाद का उपयोग

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

यकीन है कि जे एस फ़ाइल और "चरणों बनाएँ" अपने लक्ष्य में "संकलित सूत्रों का कहना है" नहीं में "कॉपी बंडल संसाधन" में सूचीबद्ध किया गया है। डिफ़ॉल्ट एक्सकोड सीम जावास्क्रिप्ट फ़ाइलों को संकलित करने के लिए पसंद करते हैं। यह भी ध्यान रखें कि devicePixelRatio भविष्य में 3 या उससे अधिक होने पर वर्तमान स्क्रिप्ट चीजों को तोड़ सकती है, (scale == undefined || scale == 1) से scale != 2 को केवललोड करने के लिए सावधानी बरतनी चाहिए।

अद्यतन: वहाँ भी एक jQuery-Retina-Display-Plugin कि कुछ इसी तरह करता है लेकिन width विशेषता और तेजी स्थापित करने के लिए भी करता है, तो छवि को देखने के लिए मौजूद हैं, सुनिश्चित करें कि कैसे है कि स्थानीय फ़ाइलों के लिए काम करेंगे नहीं एक HEAD अनुरोध का उपयोग करने की आवश्यकता है है।