जेएस/सीएसएस से सिस्टम डीपीआई/पीपीआई का पता लगाना?

मैं एक तरह का अनूठा ऐप पर काम कर रहा हूं जिसे विशिष्ट संकल्पों पर छवियों को उनके द्वारा प्रदर्शित किए जाने वाले डिवाइस के अनुसार उत्पन्न करने की आवश्यकता है। तो आउटपुट नियमित विंडोज ब्राउज़र (9 6 पीपीआई), आईफोन (163ppi), एंड्रॉइड जी 1 (180ppi), और अन्य उपकरणों पर अलग है। मैं सोच रहा हूं कि यह स्वचालित रूप से इसका पता लगाने का कोई तरीका है या नहीं।जेएस/सीएसएस से सिस्टम डीपीआई/पीपीआई का पता लगाना?

मेरा प्रारंभिक शोध ऐसा नहीं लगता है। मैंने जो एकमात्र सुझाव देखा है वह एक तत्व बनाना है जिसकी चौड़ाई सीएसएस में "1in" के रूप में निर्दिष्ट है, फिर उसकी ऑफसेटविड्थ की जांच करें (How to access screen display’s DPI settings via javascript? भी देखें)। समझ में आता है, लेकिन आईफोन उस तकनीक के साथ मुझसे झूठ बोल रहा है, यह कह रहा है कि यह 96ppi है।

एक और दृष्टिकोण इंच में डिस्प्ले के आयाम प्राप्त करने के लिए हो सकता है और फिर पिक्सेल में चौड़ाई से विभाजित हो सकता है, लेकिन मुझे यकीन नहीं है कि यह कैसे करना है।

स्रोत

2008-11-11 Anonymous

संभावित डुप्लिकेट [सभी आधुनिक ब्राउज़रों में पृष्ठ ज़ूम स्तर का पता कैसे लगाएं?] (Http://stackoverflow.com/questions/ 1713771/कैसे-टू-डिटेक्ट-पेज-ज़ूम-लेवल-इन-ऑल-आधुनिक-ब्राउज़र्स) –

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

स्रोत

2008-11-11 01:49:04 FriendOfFuture

डीपीआई परिभाषा के भौतिक आकार से जुड़ी परिभाषा के अनुसार है। तो आप वास्तव में हार्डवेयर के पीछे बिना असली डीपीआई प्राप्त करने में सक्षम नहीं होंगे।

आधुनिक ओएस संगत डिस्प्ले रखने के लिए एक सामान्य मूल्य पर सहमत हुए: 96 डीपीआई। यह शर्म की बात है लेकिन यह एक तथ्य है।

आपको संकल्प की गणना करने के लिए आवश्यक वास्तविक स्क्रीन आकार का अनुमान लगाने में सक्षम होने के लिए स्नीफिंग पर भरोसा करना होगा (डीपीआई = पिक्सेल आकार/स्क्रीनसाइज)।

स्रोत

2008-11-23 00:31:16

परिभाषा के अनुसार डीपीआई ** ** नहीं है 'नंबरऑफ पिक्सल/आकारऑफ मॉनिटरइन इंच'। डीपीआई को परिभाषित किया गया है कि आपकी स्क्रीन पर 10 बिंदु टेक्स्ट एक पुस्तक में मानक 10 बिंदु टेक्स्ट के समान आकार के समान दिखाई देता है। प्रिंट में, और टाइपोग्राफी, '1 इंच = 72 अंक'। महत्वपूर्ण भेद यह है कि लोगों के पास आमतौर पर एक पुस्तक (33% वास्तव में) की तुलना में उनके मॉनिटर की दूरी दूर होती है। यही वह जगह है जहां माइक्रोसॉफ्ट को मान मूल्य '96 डीपीआई 'मिला:' 72 * 33% = 96'। आदर्श रूप से आप अपने मॉनीटर को अपने चेहरे से बहुत दूर रखेंगे क्योंकि आप आमतौर पर एक पुस्तक धारण करते हैं। लेकिन आप नहीं करते, इसलिए यही कारण है कि आपके पास 96 डीपीआई है। –

वह टिप्पणी त्रुटियों से भरा है। डीपीआई एक संक्षेप है जिसका अर्थ है प्रति इंच डॉट्स। एक स्क्रीन के साथ, आपको आमतौर पर इंच में विकर्ण के आकार के साथ प्रदान किया जाता है। इस विकर्ण पर कितने पिक्सल झूठ बोलते हैं, इसकी गणना करने के लिए, आपको (x^2 + y^2) के वर्ग रूट को काम करना होगा जहां x और y क्षैतिज और ऊर्ध्वाधर पिक्सेल हैं। उदाहरण के लिए, 24 "डिस्प्ले पर 1920x1080 के लिए, डीपीआई लगभग 9 8.8 है। और 72 * 33% लगभग 24 है; आपका मतलब 72 * 133% है। शायद 96DPI उस समय मॉनीटर के औसत पैमाने से अधिक नहीं था, और मॉनीटर की तुलना में आपके पास एक पुस्तक रखने वाली दूरी से कोई लेना देना नहीं है। – davtom

क्या आप कुछ और नहीं कर सकते? उदाहरण के लिए, यदि आप किसी कैमरे द्वारा पहचाने जाने वाली छवि उत्पन्न कर रहे हैं (यानी आप अपना प्रोग्राम चलाते हैं, अपने सेलफोन को कैमरे में स्वाइप करें, जादू होता है), क्या आप कुछ आकार-स्वतंत्र का उपयोग नहीं कर सकते?

यदि यह नियंत्रित वातावरण में तैनात करने के लिए एक आवेदन है, तो क्या आप अंशांकन उपयोगिता प्रदान कर सकते हैं? (आप प्रिंट बिजनेस कार्ड जैसे छोटे शासक के साथ कुछ सरल बना सकते हैं, अंशांकन प्रक्रिया के दौरान इसका उपयोग करें)।

स्रोत

2008-11-25 21:20:25 alex

मुझे एक ही छवि को एक ही आकार में अलग-अलग स्क्रीन डीपीआई पर प्रदर्शित करने की आवश्यकता थी, लेकिन केवल विंडोज आईई के लिए। मैंने उपयोग किया:

 
<img src="image.jpg" style=" 
    height:expression(scale(438, 192)); 
    width:expression(scale(270, 192))" /> 

function scale(x, dpi) { 

    // dpi is for orignal dimensions of the image 
    return x * screen.deviceXDPI/dpi; 
}

इस मामले में मूल छवि चौड़ाई/ऊंचाई 270 और 438 है और छवि 1 9 2 डीपीआई स्क्रीन पर विकसित की गई थी। screen.deviceXDPI क्रोम में परिभाषित किया गया है नहीं और बड़े पैमाने समारोह आईई

के अलावा अन्य ब्राउज़रों का समर्थन करने के लिए

स्रोत

2009-11-27 18:06:26

यहाँ क्या मेरे लिए काम करता है अद्यतन करने की आवश्यकता होगी (लेकिन मोबाइल फोन पर उसकी जांच नहीं की थी):

<body><div id="ppitest" style="width:1in;visible:hidden;padding:0px"></div></body>

फिर मैंने .js में डाल दिया: screenPPI = document.getElementById('ppitest').offsetWidth;

यह मुझे 96 मिला, जो मेरे सिस्टम के पीपीआई से मेल खाता है।

स्रोत

2010-12-17 15:33:34 john

+20

यह सभी उपकरणों पर काम नहीं करता है। मेरा एंड्रॉइड फोन 96 डीपीआई भी रिपोर्ट करता है। – Pointy

यह किसी भी डिवाइस पर काम नहीं करता है। सब कुछ रिपोर्ट करने लगता है 96ppi: http://codepen.io/anon/full/mrfvg – mckamey

इसे आज़माएं http://jsfiddle.net/NgSj7/ 96 वास्तव में सही है –

resolution सीएसएस मीडिया क्वेरी नहीं है - यह आप विशिष्ट प्रस्तावों को सीएसएस शैलियों को सीमित करने की अनुमति देता है:

http://www.w3.org/TR/css3-mediaqueries/#resolution

हालांकि, it’s only supported by Firefox 3.5 and above, Opera 9 and above, and IE 9।अन्य ब्राउज़र आपके रिज़ॉल्यूशन-विशिष्ट शैलियों को बिल्कुल लागू नहीं करेंगे (हालांकि मैंने गैर डेस्कटॉप ब्राउज़र नहीं चेक किए हैं)।

स्रोत

2011-11-21 14:01:33

इसका परीक्षण करने के लिए यहां एक खेल का मैदान है http://home.heeere.com/tech-ppi-aware-css-media-query.html –

वाह, मैं केवल 1 या 0.1 में प्रत्येक संभावित रिज़ॉल्यूशन को सूचीबद्ध करने वाली स्टाइल शीट बनाने की इमेजिंग कर सकता हूं डीपीआई रेंज वृद्धि और किस शैली के आधार पर निकटतम वास्तविक स्क्रीन रिज़ॉल्यूशन का उपयोग किया गया है ... – Michael

यह बिल्कुल सही नहीं लगता है ... एंडलेस द्वारा उत्तर इस क्वेरी के साथ एक बाइनरी खोज प्रतीत होता है, फिर भी मेरे डिवाइस में @ रेमी द्वारा जुड़ा हुआ खेल का मैदान वही अमान्य परिणाम देता है ... – Michael

function getPPI(){ 
    // create an empty element 
    var div = document.createElement("div"); 
    // give it an absolute size of one inch 
    div.style.width="1in"; 
    // append it to the body 
    var body = document.getElementsByTagName("body")[0]; 
    body.appendChild(div); 
    // read the computed width 
var ppi = document.defaultView.getComputedStyle(div, null).getPropertyValue('width'); 
// remove it again 
body.removeChild(div); 
// and return the value 
return parseFloat(ppi);

}

(वोडाफोन से)

स्रोत

2014-02-05 12:20:42 TJS101

काम नहीं करता है, मेरे 1080 पी एंड्रॉइड स्मार्टफोन के साथ-साथ मेरे लैपटॉप पर 96 देता है। – nmz787

मैं सिर्फ इस लिंक मिल गया: http://dpi.lv/। मूल रूप से यह क्लाइंट डिवाइस रिज़ॉल्यूशन, डीपीआई और स्क्रीन आकार को खोजने के लिए एक वेबटोल है।

मैंने अपने कंप्यूटर और मोबाइल फोन पर देखा और यह मेरे लिए सही रिज़ॉल्यूशन और डीपीआई प्रदान करता है। इसके लिए एक गिथब रेपो है, ताकि आप देख सकें कि यह कैसे काम करता है।

स्रोत

2014-07-27 20:07:29 Adam

नहीं, वे भौतिक उपकरण विकर्ण नहीं बता सकते हैं और हमेशा मेरे सभी उपकरणों पर 13.3 "दिखा सकते हैं। आप इसके द्वारा" पिक्सेल प्रति इंच "की गणना कर सकते हैं लेकिन वास्तव में यह डिवाइस आकार का पता नहीं लगा सकता है। – Takol

@Takol यह सिर्फ डिफ़ॉल्ट मान है। आप इसे बदलने के लिए हैं। जावास्क्रिप्ट द्वारा विकर्णों का पता नहीं लगाया जा सकता है। Https://github.com/LeaVerou/dpi/issues/36 –

@FrederikKrautwald देखें और फिर भी सवाल है "जेएस/सीएसएस से सिस्टम डीपीआई/पीपीआई का पता लगाना? "जो इसका उत्तर नहीं है। – Michael

<div id='testdiv' style='height: 1in; left: -100%; position: absolute; top: -100%; width: 1in;'></div> 
<script type='text/javascript'> 
    var devicePixelRatio = window.devicePixelRatio || 1; 
    dpi_x = document.getElementById('testdiv').offsetWidth * devicePixelRatio; 
    dpi_y = document.getElementById('testdiv').offsetHeight * devicePixelRatio; 
</script>

यहां http://www.infobyip.com/detectmonitordpi.php से पकड़ा गया। मोबाइल उपकरणों पर काम करता है! (Android 4.2.2 परीक्षण किया)

स्रोत

2014-09-23 21:17:24 MaxXx1313

आप जो भी कर रहे हैं वह डिवाइस द्वारा स्थिर 96 गुणा कर रहा है पिक्सेलरेटियो (जिसे ओवरराइड किया जा सकता है)। यह सटीक पीपीआई प्राप्त करने का एक सतत तरीका नहीं है। – GreySage

मैं ca यह नहीं पता कि आप ऐसा क्यों सोचते हैं। – MaxXx1313

क्योंकि मेरे द्वारा टाइप किए गए शब्दों का अर्थ है? सभी उपकरणों पर, सीएसएस में 1in को 9 6 पीएक्स के रूप में परिभाषित किया जाता है, इसलिए पीएक्स में चौड़ाई = 1in के साथ एक div को मापने से हमेशा 96 मिलेंगे। फिर आप डिवाइस को पिक्सलरेटियो द्वारा गुणा कर रहे हैं (जो फिर से हमेशा 96 रहेगा) मानकों या सीमाओं के अधीन, यह कुछ भी हो सकता है और विशेष रूप से कोई भी इसे जो भी मूल्य चाहता है उसे ओवरराइट कर सकता है। संक्षेप में, यह विधि विश्वसनीय नहीं है। – GreySage

मैं जानने के बिना एक तरीका है कि डोम की आवश्यकता नहीं है के साथ आया था ... सब

डोम गंदा हो सकता है पर, शरीर के लिए सामान संलग्न करने के लिए आप की आवश्यकता होती है क्या आपकी स्टाइलशीट में width: x !important के साथ सामान चल रहा है। तुम भी

// Binary search, (faster then loop) 
 
// also don't test every possible value, since it tries low, mid, and high 
 
// http://www.geeksforgeeks.org/find-the-point-where-a-function-becomes-negative/ 
 
function findFirstPositive(b, a, i, c) { 
 
    c=(d,e)=>e>=d?(a=d+(e-d)/2,0<b(a)&&(a==d||0>=b(a-1))?a:0>=b(a)?c(a+1,e):c(d,a-1)):-1 
 
    for (i = 1; 0 >= b(i);) i *= 2 
 
    return c(i/2, i)|0 
 
} 
 

 

 
var dpi = findFirstPositive(x => matchMedia(`(max-resolution: ${x}dpi)`).matches) 
 

 
console.log(dpi)

स्रोत

2016-03-11 13:37:35 Endless

यह कोड वास्तव में बहुत अच्छी तरह से काम करता है, लेकिन सभी – jrmgx

पर पठनीय नहीं है परिणाम क्या सटीक होना चाहिए? मेरा मॉनीटर प्रलेखन 93 कहता है जबकि आपका कार्य 96 कहता है। – Supersharp

संख्या सटीक होना चाहिए। जब तक फ़ंक्शन झूठा नहीं होता है तब तक यह n^2 करके धारणा बनाता है और फिर मध्य संख्या ले कर संख्या की ओर काम करता है। आप इसे आजमा सकते हैं: [fiddle] (https://jsfiddle.net/12t6gxzh/1)। अगर समारोह कहता है कि यह 9 3 है तो यह 93 होना चाहिए। सोचें कि ब्राउज़र के साथ कुछ मौलिक टूटा हुआ है, इस तरह ब्राउज़र को पता नहीं है कि स्क्रीन रिज़ॉल्यूशन क्या है, इसलिए यह मानता है कि यह 96 – Endless

@Endless से जबाब बहुत अच्छी है डोम के लिए उपयोग करने के लिए तैयार होने के लिए इंतजार करना होगा ..., लेकिन सभी पर पठनीय, यह एक समान है निश्चित न्यूनतम/अधिकतम के साथ approche (यह अच्छे होना चाहिए)

var dpi = (function() { 
    for (var i = 56; i < 2000; i++) { 
     if (matchMedia("(max-resolution: " + i + "dpi)").matches === true) { 
      return i; 
     } 
    } 
    return i; 
})();

matchMedia अब अच्छी तरह से समर्थित है और अच्छे परिणाम देना चाहिए, देखना http://caniuse.com/#feat=matchmedia

सावधान रहें ब्राउज़र आपको सटीक स्क्रीन डीपीआई नहीं देगा, लेकिन केवल अनुमानित

स्रोत

2016-09-30 15:50:27 jrmgx

यह निश्चित रूप से अधिक पठनीय है।लेकिन मेरे और आपके अलग-अलग हैं कि मेरा केवल मैच 11 मीडिया को निष्कर्ष निकाला गया है कि यह 96 है जहां आपका कोड 56 और 2000 – Endless

के बीच हर संभव संख्या की कोशिश करता है, यह वेबकिट/सफारी (आईओएस 11) पर काम नहीं करेगा, यह अधिकतम दिखाई देता है -श्रेषण अभी तक समर्थित नहीं है – Eugen

जेएस/सीएसएस से सिस्टम डीपीआई/पीपीआई का पता लगाना?

उत्तर

संबंधित मुद्दे