2011-05-06 9 views
9

के साथ आईफोन 4 रेटिना डिस्प्ले डिटेक्शन मैं एक पहचान स्क्रिप्ट बना रहा हूं जो उपयोगकर्ता द्वारा मेरी साइट पर आने पर रेटिना डिस्प्ले (या इसी तरह) के साथ किसी डिवाइस (वर्तमान में केवल आईफ़ोन 4) को स्नीफ करता है। क्योंकि संकल्प अधिक है, मुझे उच्च रेज छवियों/ग्राफिक्स को धक्का देना होगा। एकमात्र समाधान जो मैं पा सकता हूं (PHP और जावास्क्रिप्ट का उपयोग करके) devicePixelRatio का पता लगाने और एक कुकी सेट करना है।PHP और/या जावास्क्रिप्ट

<?php 
    $imgPath = "images/"; 
    if(isset($_COOKIE["imgRes"])){ 
     $imgRes = $_COOKIE["imgRes"]; 
     if($imgRes >= 2){ 
      $imgPath = "images/highRes/"; 
     } 
    } else { 
?> 
    <script language="javascript"> 
     var the_cookie = "imgRes="+window.devicePixelRatio+";"+the_cookie; 
     document.cookie = the_cookie; 
     location = '<?=$_SERVER['PHP_SELF']?>'; 
    </script> 
<?php 
    } 
?> 

किसी को भी ऐसा करने का एक बेहतर तरीका के पार चलो या इस स्क्रिप्ट में सुधार लाने का कोई सुझाव है: यहाँ कोड है कि मैं का उपयोग कर रहा है। यह स्क्रिप्ट काम करता है, यह सिर्फ गंदे लगता है।

उत्तर

2

आप here वर्णित CSS3 मीडिया प्रश्नों का उपयोग कर सकते हैं, लेकिन यह आपको अतिरिक्त सीएसएस नियम क्लाइंट-साइड जोड़ने देगा, छवि पथ सर्वर-पक्ष समायोजित नहीं करेगा। यह एक सीमित संख्या में स्थैतिक छवियों वाली साइट के लिए अच्छा काम करेगा।

+0

मैं इस विधि की तरह है और यह सादगी पसंद करते हैं पा सकते हैं भर में नोस्क्रिप्ट टैग की सामग्री को पढ़ने के लिए। हालांकि, मैं छवि पथ को समायोजित करना चाहता हूं। – Corey

+0

यह वास्तव में सबसे अच्छा समाधान होने के समाप्त हो गया। पारितोषिक के लिए धन्यवाद। – Corey

1

मैंने साइट पर रेटिना डिस्प्ले के लिए समर्थन जोड़ने की आवश्यकता होने पर एक बहुत ही "कम तकनीक" समाधान लागू किया: मैंने सभी छवियों के आकार को दोगुना कर दिया और उन्हें 50% आकार में प्रदर्शित करने के लिए सेट किया।

दुर्भाग्यवश, इसका मतलब यह था कि प्रत्येक डिवाइस उच्च रिज़ॉल्यूशन छवियों को लोड कर रहा था, भले ही यह उनका समर्थन न करे, लेकिन मेरे पास चिंता करने के लिए बहुत सारे ग्राफिक्स नहीं थे, इसलिए यह मेरे लिए एक अच्छा समाधान था।

9

ब्रायन क्रे जवाब गलत हो रहा है।

जावास्क्रिप्ट में यह करने के लिए सही तरीका है:

var retina = window.devicePixelRatio && window.devicePixelRatio >= 2; 
0

मैं एक तकनीक का उपयोग मैं जो स्क्रिप्ट का उपयोग कर सही छवि के लिए एक एकल अनुरोध करता है, एक डिफ़ॉल्ट पर वापस गिरने जब कोई जावास्क्रिप्ट उपलब्ध है।

  1. प्लेस यदि आप उच्च रेस छवियों की आवश्यकता होती है (ऊपर साइमन के जवाब के अनुसार) एक < नोस्क्रिप्ट > टैग
  2. अंदर अपनी छवि का पता लगाने नोस्क्रिप्ट टैग के अंदर img src की सामग्री पढ़ने और उच्च करने के लिए पथ को संशोधित तदनुसार res छवि।
  3. < नोस्क्रिप्ट > टैग हटाएं।

आप एक छोटे polyfil की आवश्यकता होगी मज़बूती से सभी ब्राउज़रों (IE8 और नीचे) है जो आप here