180

मैं वर्तमान ब्राउज़र चौड़ाई प्राप्त करने के लिए एक जावास्क्रिप्ट फ़ंक्शन लिखने की कोशिश कर रहा हूं।

मुझे यह मिला:

javascript:alert(document.body.offsetWidth);

लेकिन इसकी समस्या यह है कि यह विफल हो जाता है यदि शरीर की चौड़ाई 100% है।

क्या कोई अन्य बेहतर कार्य या वर्कअराउंड है?

— अमृत एल्गारही
स्रोत

133

2017 के लिए अपडेट

मेरा मूल उत्तर 2009 में लिखा गया था। जबकि यह अभी भी काम करता है, मैं इसे 2017 के लिए अपडेट करना चाहूंगा। ब्राउज़र्स अभी भी अलग तरह से व्यवहार कर सकते हैं। मुझे क्रॉस-ब्राउज़र स्थिरता बनाए रखने के लिए jQuery टीम पर बहुत अच्छा काम करने का भरोसा है। हालांकि, पूरे पुस्तकालय को शामिल करना आवश्यक नहीं है। JQuery स्रोत में संबंधित भाग आयाम 37.Js की लाइन 37 पर पाया जाता है । यहाँ इसे स्टैंडअलोन के लिए निकाला और संशोधित किया गया है:

function getWidth() {
  return Math.max(
    document.body.scrollWidth,
    document.documentElement.scrollWidth,
    document.body.offsetWidth,
    document.documentElement.offsetWidth,
    document.documentElement.clientWidth
  );
}

function getHeight() {
  return Math.max(
    document.body.scrollHeight,
    document.documentElement.scrollHeight,
    document.body.offsetHeight,
    document.documentElement.offsetHeight,
    document.documentElement.clientHeight
  );
}

console.log('Width:  ' +  getWidth() );
console.log('Height: ' + getHeight() );

स्निपेट का विस्तार करें

मूल उत्तर

चूंकि सभी ब्राउज़र अलग-अलग व्यवहार करते हैं, इसलिए आपको पहले मूल्यों के लिए परीक्षण करना होगा, और उसके बाद सही का उपयोग करना होगा। यहाँ एक फ़ंक्शन है जो आपके लिए ऐसा करता है:

function getWidth() {
  if (self.innerWidth) {
    return self.innerWidth;
  }

  if (document.documentElement && document.documentElement.clientWidth) {
    return document.documentElement.clientWidth;
  }

  if (document.body) {
    return document.body.clientWidth;
  }
}

और इसी तरह ऊंचाई के लिए:

function getHeight() {
  if (self.innerHeight) {
    return self.innerHeight;
  }

  if (document.documentElement && document.documentElement.clientHeight) {
    return document.documentElement.clientHeight;
  }

  if (document.body) {
    return document.body.clientHeight;
  }
}

अपनी स्क्रिप्ट में इन दोनों का उपयोग करके कॉल करें getWidth()या getHeight()। यदि ब्राउज़र के किसी भी मूल गुण को परिभाषित नहीं किया गया है, तो यह वापस आ जाएगा undefined।

— ट्रैविस
स्रोत

11

सर्वश्रेष्ठ उत्तर क्योंकि मुझे ब्राउज़र विंडो की चौड़ाई के आधार पर एक साधारण रीडायरेक्ट के लिए 33k लाइब्रेरी को शामिल नहीं करना है

— डेविड एगुइरे

1

यह jQuery के कार्यान्वयन की तुलना में लगातार सही (या अपेक्षित) परिणाम पैदा करता है।

— इमैनुएल जॉन

3

... इन तीनों में से प्रत्येक कुछ परिणाम दिखाता है और सभी परिणाम (चौड़ाई) अलग हैं। उदाहरण के लिए Google Chrome देखें self.innerWidth 423, document.documentElement.clientWidth 326और document.body.clientWidth 406। ऐसे मामले में सवाल: कौन सा सही है और कौन सा उपयोग करना है? उदाहरण के लिए मैं गूगल मैप का आकार बदलना चाहता हूं। 326 या 423 बड़ा अंतर। यदि चौड़ाई ~ 700 है, तो 759, 735, 742 (इतना बड़ा अंतर नहीं) देखें

— एंड्रीस

1

@ user2118559

var pageWidth = Math.max(self.innerWidth || 0, document.documentElement.clientWidth || 0, document.body.clientWidth || 0);

और var windowWidth = self.innerWidth || -1;// "बॉडी" या "स्क्रीन" या "डॉक्यूमेंट" के कारण "विंडो" नहीं है यदि आप html के अतिप्रवाहित कंटेंट की जांच करते हैं तो आप समझ सकते हैं। # .stack.imgur.com

— अब्दुल्ला

1

कॉपी-पेस्ट त्रुटि आपके उदाहरण में, फ़ंक्शन getWidth()संदर्भself.innerHeight

— जीको

309

यह एक है पिछवाड़े में दर्द । मैं बकवास बंद करने और jQuery का उपयोग करने की सलाह देता हूं, जो आपको बस करने देता है $(window).width()।

— अराजकता
स्रोत

2

अगर मुझे सही से याद है, तो jQuery ने बहुत सारे आयामों को कोर में खींच लिया है। क्या आपको अभी भी उन आयामों की आवश्यकता है जो आप सुझा रहे हैं?

— नोसरेडना

आप नहीं करते हैं। जो लाजवाब है। प्रति उत्तर संपादित सर उठाने के लिए धन्यवाद।

— अराजकता

6

JQuery में $ (विंडो)। उपलब्धता () समर्थन संस्करण 1.2 के बाद से है, यदि यह किसी के लिए भी प्रासंगिक है।

— अराजकता

18

मैंने पाया है कि नीचे दिए गए उत्तर में उदाहरणों के अनुसार मैंने $ (विंडो) .एक्सचेंज () हमेशा इनरवर्थ / क्लायंटवीड के समान मान नहीं लौटाया है। jQuery के संस्करण ब्राउज़र स्क्रॉलबार को ध्यान में नहीं रखते हैं (वैसे भी एफएफ में)। इससे मुझे सीएसएस @media प्रश्नों के साथ बहुत भ्रम हो गया जो गलत चौड़ाई पर ट्रिगर करने के लिए दिखाई देते हैं। मूल कोड का उपयोग करना अधिक विश्वसनीय लगता है क्योंकि यह स्क्रॉलबार की उपस्थिति को ध्यान में रखता है।

— कोडर

5

विंडो चौड़ाई पाने के लिए कोड की 30k लाइनों को जोड़ना एक BAD समाधान है!

— codechimp

49

var w = window.innerWidth;
var h = window.innerHeight;
var ow = window.outerWidth; //including toolbars and status bar etc.
var oh = window.outerHeight;

दोनों पूर्णांक लौटाते हैं और jQuery की आवश्यकता नहीं होती है। क्रॉस-ब्राउज़र संगत।

मुझे अक्सर jQuery की चौड़ाई () और ऊंचाई () के लिए अमान्य मान मिलते हैं

— ब्रैडली बाढ़
स्रोत

1

सफारी iphone पर इसका उपयोग करने में परेशानी हो रही है।

— न्यू एवरेस्ट

17

किसी ने मैचमीडिया का उल्लेख क्यों नहीं किया?

if (window.matchMedia("(min-width: 400px)").matches) {
  /* the viewport is at least 400 pixels wide */
} else {
  /* the viewport is less than 400 pixels wide */
}

इतना परीक्षण नहीं किया, लेकिन Android डिफ़ॉल्ट और Android क्रोम ब्राउज़र, डेस्कटॉप क्रोम के साथ परीक्षण किया गया, अब तक ऐसा लगता है कि यह अच्छी तरह से काम करता है।

बेशक, यह संख्या मूल्य नहीं लौटाता है, लेकिन बूलियन लौटाता है - अगर मैच हो या नहीं, तो शायद सवाल फिट नहीं हो सकता है, लेकिन हम वैसे भी चाहते हैं और शायद सवाल का लेखक चाहता है।

— Darius.V
स्रोत

1

केवल IE10 + का समर्थन करता है।

— qarthandso

17

यदि वे IE9 या पुराने का उपयोग करते हैं, तो वे इंटरनेट के लायक नहीं हैं।

— डेरियस .V

सफारी आईफोन इस बात का समर्थन नहीं करता है।

— न्यू एवरेस्ट

नए आईओएस सफारी संस्करणों को मैचमीडिया का समर्थन करना चाहिए। स्रोत: caniuse.com/#feat=matchmedia

— Vargr

8

IE के अंधेरे युग में वापस W3schools और इसके क्रॉस ब्राउज़र से!

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
var w = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

var h = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;

var x = document.getElementById("demo");
x.innerHTML = "Browser inner window width: " + w + ", height: " + h + ".";

alert("Browser inner window width: " + w + ", height: " + h + ".");

</script>

</body>
</html>

— user3651121
स्रोत

दृष्टिकोण खूबसूरती से काम करता है और स्वीकृत उत्तर हो सकता है, क्योंकि यह किसी भी अन्य समाधान (jQuery का उपयोग करने के अलावा) की तुलना में बहुत कम है।

— साइमन स्टाइनबर्गर

2

यदि यह document.documentElement अपरिभाषित है, तो क्या यह एक त्रुटि नहीं है?

— फील्हो

6

यहाँ प्रस्तुत समारोह का एक छोटा संस्करण है:

function getWidth() {
    if (self.innerWidth) {
       return self.innerWidth;
    }
    else if (document.documentElement && document.documentElement.clientHeight){
        return document.documentElement.clientWidth;
    }
    else if (document.body) {
        return document.body.clientWidth;
    }
    return 0;
}

— इस्माइल
स्रोत

4

यदि सभी स्थितियाँ झूठी हैं, तो मान वापस करने में विफल रहता है।

— माइक सी।

10

आपको elses की आवश्यकता नहीं है :)

— Nick

0

ट्रैविस के उत्तर के आधुनिक जेएस के लिए एक अनुकूलित समाधान:

const getPageWidth = () => {
  const bodyMax = document.body
    ? Math.max(document.body.scrollWidth, document.body.offsetWidth)
    : 0;

  const docElementMax = document.documentElement
    ? Math.max(
        document.documentElement.scrollWidth,
        document.documentElement.offsetWidth,
        document.documentElement.clientWidth
      )
    : 0;

  return Math.max(bodyMax, docElementMax);
};

— सरगियू
स्रोत

0

ट्रैविस के उत्तर के लिए एक महत्वपूर्ण अतिरिक्त; आपको अपने दस्तावेज़ निकाय में getWidth () को यह सुनिश्चित करने की आवश्यकता है कि स्क्रॉलबार की चौड़ाई को गिना जाए, और getWidth () से घटाए गए ब्राउज़र की स्क्रॉलबार चौड़ाई। मैंने क्या किया ;

<body>
<script>
function getWidth(){
return Math.max(document.body.scrollWidth,
document.documentElement.scrollWidth,
document.body.offsetWidth,
document.documentElement.offsetWidth,
document.documentElement.clientWidth);
}
var aWidth=getWidth();
</script>
</body>

और कहीं भी बाद में चर चर कहते हैं।

— burkul
स्रोत

जावास्क्रिप्ट कोड का उपयोग करके ब्राउज़र की चौड़ाई कैसे प्राप्त करें?

2017 के लिए अपडेट

मूल उत्तर