मैं मोबाइल डिज़ाइन में उपयोग के लिए किसी डिवाइस की DPI का पता लगाने का एक तरीका ढूंढ रहा था। मुझे यह अभी तक नहीं मिला है, लेकिन मुझे यह पता लगाने का एक तरीका मिल गया है कि क्या साइट रीडर रेटिना डिस्प्ले का उपयोग करता है। बिना परेशानी के इसे कैसे प्राप्त करें:

var retina = window.devicePixelRatio > 1 ? true : false; 

अब रेटिना वैरिएबल सही होगा यदि रीडर में रेटिना डिस्प्ले है। भविष्य में, आप सरल का उपयोग कर सकते हैं यदि स्टेटमेंट डिस्प्ले के प्रकार के आधार पर किसी विशेष कोड को निष्पादित करने के लिए।

 if (retina) { //     retina } else { //      retina } 

क्यों?

यह एक अच्छा उदाहरण है: यदि मेरी साइट पर 100 × 100 चित्रण (या वीडियो) है, तो उपरोक्त कोड मुझे एक बड़ी छवि (200 × 200) डाउनलोड करने की सलाह देगा, ताकि यह iPhone 4 पर स्पष्ट रूप से दिखाई दे - और अन्य उपकरणों के उपयोगकर्ताओं को एक चित्र डाउनलोड करने की आवश्यकता नहीं है। 200 × 200 बिना आवश्यकता के। आखिरकार, मोबाइल उपयोगकर्ताओं के लिए गति विशेष रूप से महत्वपूर्ण है।

 if (retina) { var html = '<img src="200x200.jpg" width=100 height=100>'; } else { var html = '<img src="100x100.jpg" width=100 height=100>'; }