जावास्क्रिप्ट के साथ स्क्रीन रिज़ॉल्यूशन का पता कैसे लगाएं?

Question

क्या कोई तरीका है जो सभी ब्राउज़रों के लिए काम करता है?

Answer 1

मूल उत्तर

हाँ।

window.screen.availHeight
window.screen.availWidth

अद्यतन 2017-11-10

टिप्पणियों में सुनामी से :

एक मोबाइल डिवाइस के मूल रिज़ॉल्यूशन को प्राप्त करने के लिए आपको डिवाइस पिक्सेल अनुपात के साथ गुणा करना होगा: window.screen.width * window.devicePixelRatioऔर window.screen.height * window.devicePixelRatio। यह डेस्कटॉप पर भी काम करेगा, जिसका अनुपात 1 होगा।

और एक अन्य जवाब में बेन से :

वेनिला जावास्क्रिप्ट में, यह आपको उपलब्ध चौड़ाई / ऊँचाई देगा:

window.screen.availHeight
window.screen.availWidth

पूर्ण चौड़ाई / ऊंचाई के लिए, उपयोग करें:

window.screen.height
window.screen.width

Comments

अभी यह काफी सही नहीं है। यह पेज ज़ूम के संभावित परिवर्तन पर विचार नहीं करता है।

— सर्गच

@sergzach - उस स्थिति में मैं jQuery के $(window).width()बजाय का उपयोग करूँगा, chaim.dev का उत्तर देखें

— BornToCode

सटीक स्क्रीन आकार (अगले उत्तर में सुझाए अनुसार) प्राप्त करने के लिए window.screen.height और window.screen. उपलब्धता का उपयोग करें। आपको सटीक आकार नहीं मिलने का कारण यह है कि यह उपलब्ध चौड़ाई और ऊँचाई की जाँच कर रहा है, इसका मतलब यह है कि यह टूलबार की ऊँचाई को घटा देगा (जो कि विंडोज़ 7/8 पर बिल्कुल

— 40px है

बेहतर नहीं होगा, स्क्रीन रिज़ॉल्यूशन के लिए window.screen.height और चौड़ाई के साथ जाना होगा? क्यों लाभ उठाएं? उदाहरण के लिए, मेरा लाभ 1050 है, जब वास्तव में 1080 है।

— मालवोस

@ आप के साथ गुणा करना होगा window.devicePixelRatio। Alessandros जवाब पर मेरी टिप्पणी का संदर्भ लें।

— सुनामी

Answer 2

var width = screen.width;
var height = screen.height;

Comments

यह बराबर है window.screen। बस इसे मौजूदा उत्तर में जोड़ना चाहिए।

— गजस

वास्तव में यह सही उत्तर है। screen.availHeightसिर्फ ब्राउज़र विंडो में उपलब्ध ऊंचाई screen.heightदेता है जबकि स्क्रीन की सटीक ऊंचाई देता है।

— क्षमा करें

यह डीपीआई स्केल्ड रिज़ॉल्यूशन लौटाता है, न कि देशी स्क्रीन रिज़ॉल्यूशन।

— डोमिनिक सेरिसानो

एक मोबाइल डिवाइस के मूल रिज़ॉल्यूशन को प्राप्त करने के लिए आपको डिवाइस पिक्सेल अनुपात के साथ गुणा करना होगा: window.screen.width * window.devicePixelRatioऔर window.screen.height * window.devicePixelRatio। यह डेस्कटॉप पर भी काम करेगा, जिसका अनुपात 1.

— सुनामी

डेस्कटॉप कंप्यूटर जरूरी की 1. एक अनुपात की ज़रूरत नहीं होगी

— 12Me21

Answer 3

वेनिला जावास्क्रिप्ट में, यह आपको उपलब्ध चौड़ाई / ऊँचाई देगा:

window.screen.availHeight
window.screen.availWidth

पूर्ण चौड़ाई / ऊंचाई के लिए, उपयोग करें:

window.screen.height
window.screen.width

उपरोक्त दोनों को खिड़की उपसर्ग के बिना लिखा जा सकता है।

JQuery की तरह? यह सभी ब्राउज़रों में काम करता है, लेकिन प्रत्येक ब्राउज़र अलग-अलग मान देता है।

$(window).width()
$(window).height()

Answer 4

क्या आप डिस्प्ले रिज़ॉल्यूशन (जैसे 72 डॉट प्रति इंच) या पिक्सेल आयाम (ब्राउज़र विंडो वर्तमान में 1000 x 800 पिक्सल है) का मतलब है?

स्क्रीन रिज़ॉल्यूशन आपको यह जानने में सक्षम करता है कि इंच में 10 पिक्सेल की लाइन कितनी मोटी होगी। पिक्सेल आयाम आपको बताते हैं कि उपलब्ध स्क्रीन ऊंचाई का कितना प्रतिशत 10 पिक्सेल चौड़ी क्षैतिज रेखा द्वारा लिया जाएगा।

केवल जावास्क्रिप्ट से डिस्प्ले रिज़ॉल्यूशन जानने का कोई तरीका नहीं है क्योंकि कंप्यूटर आमतौर पर स्क्रीन के वास्तविक आयामों को नहीं जानता है, बस पिक्सल की संख्या। 72 डीपीआई सामान्य अनुमान है ...।

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

बेशक, आप प्रति सेमी डॉट्स में रिज़ॉल्यूशन भी माप सकते हैं। गैर-वर्ग डॉट्स का अस्पष्ट विषय भी है। लेकिन मैं पीछे हटा।

Answer 5

JQuery का उपयोग आप कर सकते हैं:

$(window).width()
$(window).height()

Comments

सबसे आसान क्रॉस / सब कुछ समाधान का उपयोग करें जो मैंने उपयोग किया है। कम से कम ब्राउज़र की चौड़ाई के लिए ...

— ज़र्ने द्रविट्ज़की

यह विंडो के आकार को लौटाता है, न कि स्क्रीन रिज़ॉल्यूशन पर।

— जोनास

Answer 6

आप ब्राउज़र टूलबार और (केवल स्क्रीन आकार नहीं) से बचकर, WINDOW की चौड़ाई और ऊंचाई भी प्राप्त कर सकते हैं।

ऐसा करने के लिए, का उपयोग करें: window.innerWidth और window.innerHeightगुण। इसे w3schools पर देखें ।

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

Comments

यह सबसे उपयोगी उपाय है। Window.screen.availWidth प्रॉपर्टी SCREEN देती है, व्यूपोर्ट नहीं, जो अलग हो सकता है। मेरे लिए यह जानना अधिक उपयोगी है कि मैं वास्तव में कितनी अचल संपत्ति का उपयोग कर सकता हूं, न कि यह कि ब्राउज़र की अधिकतम कितनी हो सकती है / बन सकती है।

— माइक मानेके जूल

Answer 7

मोबाइल डिवाइस पर इसे प्राप्त करने की कोशिश करने के लिए कुछ और चरणों की आवश्यकता होती है। screen.availWidthडिवाइस के उन्मुखीकरण की परवाह किए बिना एक ही रहता है।

यहाँ मोबाइल के लिए मेरा समाधान है:

function getOrientation(){
    return Math.abs(window.orientation) - 90 == 0 ? "landscape" : "portrait";
};
function getMobileWidth(){
    return getOrientation() == "landscape" ? screen.availHeight : screen.availWidth;
};
function getMobileHeight(){
    return getOrientation() == "landscape" ? screen.availWidth : screen.availHeight;
};

Comments

window.orientationअपरिभाषित देता है ... (फ़ायरफ़ॉक्स 49) screen.orientation.angleएक कोण लौटाता है, लेकिन यह परिदृश्य मोड के लिए पहले से ही 0 पर है।

— 1

Answer 8

जावास्क्रिप्ट और ऑब्जेक्ट के साथ मॉनिटर स्क्रीन रिज़ॉल्यूशन देखेंwindow.screen

Answer 9

function getScreenWidth()
{
   var de = document.body.parentNode;
   var db = document.body;
   if(window.opera)return db.clientWidth;
   if (document.compatMode=='CSS1Compat') return de.clientWidth;
   else return db.clientWidth;
}

Answer 10

केवल भविष्य के संदर्भ के लिए:

function getscreenresolution()
{
    window.alert("Your screen resolution is: " + screen.height + 'x' + screen.width);
}

Answer 11

यदि आप स्क्रीन रिज़ॉल्यूशन का पता लगाना चाहते हैं, तो आप प्लगइन रेस को चेकआउट करना चाह सकते हैं । यह आपको निम्नलिखित कार्य करने की अनुमति देता है:

var res = require('res')
res.dppx() // 1
res.dpi() // 96
res.dpcm() // 37.79527559055118

रयान वैन इटेन, प्लगइन्स लेखक से कुछ बेहतरीन रिज़ॉल्यूशन टेकअवे हैं :

• 2 यूनिट सेट मौजूद हैं और एक निश्चित पैमाने पर भिन्न हैं: डिवाइस यूनिट और सीएसएस इकाइयाँ।
• रिज़ॉल्यूशन की गणना डॉट्स की संख्या के रूप में की जाती है जो एक विशेष सीएसएस लंबाई के साथ फिट हो सकते हैं।
• इकाई रूपांतरण: 1⁢in = 2.54⁢cm = 96 =px = 72 .pt
• CSS में सापेक्ष और पूर्ण लंबाई है। सामान्य ज़ूम में: 1 normalem = 16⁢px
• dppx डिवाइस-पिक्सेल-अनुपात के बराबर है।
• devicePixelRatio की परिभाषा प्लेटफ़ॉर्म से भिन्न है।
• मीडिया क्वेश्चन मिनट-रिज़ॉल्यूशन को लक्षित कर सकते हैं। गति के लिए देखभाल के साथ प्रयोग करें।

आज के लिए रिस के लिए स्रोत कोड यहाँ है:

!function(root, name, make) {
  if (typeof module != 'undefined' && module.exports) module.exports = make()
  else root[name] = make()
}(this, 'res', function() {

  var one = {dpi: 96, dpcm: 96 / 2.54}

  function ie() {
    return Math.sqrt(screen.deviceXDPI * screen.deviceYDPI) / one.dpi
  }

  function dppx() {
    // devicePixelRatio: Webkit (Chrome/Android/Safari), Opera (Presto 2.8+), FF 18+
    return typeof window == 'undefined' ? 0 : +window.devicePixelRatio || ie() || 0
  }

  function dpcm() {
    return dppx() * one.dpcm
  }

  function dpi() {
    return dppx() * one.dpi
  }

  return {'dppx': dppx, 'dpi': dpi, 'dpcm': dpcm}
});