180

ฉันพยายามเขียนฟังก์ชัน JavaScript เพื่อรับความกว้างของเบราว์เซอร์ปัจจุบัน

ฉันพบสิ่งนี้:

javascript:alert(document.body.offsetWidth);

แต่ปัญหามันล้มเหลวถ้าร่างกายมีความกว้าง 100%

มีฟังก์ชั่นอื่น ๆ ที่ดีกว่าหรือวิธีแก้ปัญหา?

— Amr Elgarhy
แหล่งที่มา

133

อัปเดตสำหรับปี 2017

คำตอบเดิมของฉันถูกเขียนในปี 2009 ในขณะที่ยังใช้งานได้ฉันต้องการอัปเดตในปี 2560 เบราว์เซอร์ยังคงทำงานได้แตกต่างกัน ฉันเชื่อถือทีม jQuery เพื่อทำงานที่ยอดเยี่ยมในการรักษาความมั่นคงของเบราว์เซอร์ อย่างไรก็ตามไม่จำเป็นต้องรวมไลบรารีทั้งหมด ในแหล่ง jQuery ที่ส่วนที่เกี่ยวข้องจะพบได้บนเส้น 37 dimensions.js ที่นี่มีการแยกและแก้ไขเพื่อใช้งานแบบสแตนด์อโลน:

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 สำหรับการเปลี่ยนเส้นทางแบบง่ายโดยอิงจากความกว้างของหน้าต่างเบราว์เซอร์

— David Aguirre

1

สิ่งนี้สร้างผลลัพธ์ที่ถูกต้อง (หรือคาดหวัง) เมื่อเปรียบเทียบกับการนำ jQuery ไปปฏิบัติ

— Emmanuel John เมื่อ

3

... แต่ละสามรายการนี้แสดงผลลัพธ์บางส่วนและผลลัพธ์ทั้งหมด (ความกว้าง) แตกต่างกัน เช่นกับ Google Chrome ดูself.innerWidth 423, และdocument.documentElement.clientWidth 326 document.body.clientWidth 406ในกรณีคำถามดังกล่าว: ซึ่งถูกต้องและที่จะใช้? ตัวอย่างเช่นฉันต้องการปรับขนาดแผนที่ google 326 หรือ 423 ต่างกันมาก หากความกว้าง ~ 700 ให้ดูที่ 759, 735, 742 (ไม่ต่างกันมากนัก)

— Andris

1

@ user2118559

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

และvar windowWidth = self.innerWidth || -1;// เนื่องจาก "เนื้อหา" หรือ "หน้าจอ" หรือ "เอกสาร" ไม่ใช่ "หน้าต่าง" หากคุณตรวจสอบเนื้อหาที่ล้นของ html คุณสามารถเข้าใจได้ # i.stack.imgur.com/6xPdH.png

— Abdullah Aydın

1

ข้อผิดพลาดในการคัดลอกวางในตัวอย่างของคุณgetWidth()อ้างอิงฟังก์ชันself.innerHeight

— TheGecko

309

มันเป็นความเจ็บปวดในตูด ผมขอแนะนำให้ข้ามเรื่องไร้สาระและการใช้jQuery$(window).width()ซึ่งช่วยให้คุณทำ

— ความสับสนวุ่นวาย
แหล่งที่มา

2

หากฉันจำได้ถูกต้อง jQuery ได้ดึงมิติข้อมูลจำนวนมากลงในแกน คุณยังต้องการมิติข้อมูลในการทำสิ่งที่คุณแนะนำหรือไม่

— Nosredna

ปรากฎว่าคุณทำไม่ได้ ซึ่งยอดเยี่ยมมาก แก้ไขคำตอบต่อ ขอบคุณสำหรับหัวขึ้น.

— ความวุ่นวาย

6

รองรับ $ (หน้าต่าง). bandwidth () ใน jQuery ตั้งแต่รุ่น 1.2 ในกรณีที่เกี่ยวข้องกับใคร

— ความวุ่นวาย

18

ฉันพบว่า $ (หน้าต่าง) .width () ไม่ได้ส่งกลับค่าเดียวกับ innerWidth / clientWidth ตามตัวอย่างในคำตอบด้านล่าง เวอร์ชันของ jQuery ไม่ได้คำนึงถึงแถบเลื่อนของเบราว์เซอร์ (ใน FF อยู่ดี) สิ่งนี้ทำให้ฉันสับสนมากกับข้อความค้นหา CSS @media ที่ปรากฏขึ้นเพื่อเรียกใช้ที่ความกว้างผิด ดูเหมือนว่าการใช้รหัสเนทิฟจะมีความน่าเชื่อถือมากกว่าเนื่องจากจะมีลักษณะที่ปรากฏของแถบเลื่อนเข้ามาในบัญชี

— Coder

5

การเพิ่มโค้ด 30k บรรทัดเพื่อรับความกว้างของหน้าต่างเป็นโซลูชันที่ไม่ดี!

— 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 ส่งคืนค่าที่ไม่ถูกต้องสำหรับ width () และ height ()

— แบรดลีย์อุทกภัย
แหล่งที่มา

1

มีปัญหาในการใช้สิ่งนี้บน Safari iphone

— nu everest

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 และเบราว์เซอร์ Chrome android, chrome desktop จนถึงตอนนี้ดูเหมือนว่ามันจะทำงานได้ดี

แน่นอนว่ามันไม่ส่งคืนค่าตัวเลข แต่คืนค่าบูลีน - ถ้าจับคู่หรือไม่ดังนั้นอาจไม่ตรงกับคำถาม แต่นั่นคือสิ่งที่เราต้องการต่อไปและอาจเป็นผู้เขียนคำถามที่ต้องการ

— Darius.V
แหล่งที่มา

1

รองรับ IE10 + เท่านั้น

— qarthandso

17

หากพวกเขาใช้ IE9 หรือเก่ากว่าพวกเขาไม่สมควรได้รับอินเทอร์เน็ต

— Darius.V

Safari iphone ไม่สนับสนุนสิ่งนี้

— nu everest

iOS Safari เวอร์ชันที่ใหม่กว่าควรรองรับ matchMedia ที่มา: caniuse.com/#feat=matchmedia

— Vargr

8

จาก W3schools และเบราว์เซอร์ข้ามไปสู่ยุคมืดของ IE!

<!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)

— Simon Steinberger

2

จะไม่เกิดข้อผิดพลาดหรือไม่หาก document.documentElement ไม่ได้กำหนดไว้?

— PhiLho

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

ซึ่งไม่สามารถส่งคืนค่าได้หากเงื่อนไขทั้งหมดเป็นเท็จ

— Mike C

10

คุณไม่จำเป็นต้อง elses :) ความ

— นิค

0

โซลูชันที่ปรับให้เข้ากับคำตอบของเทรวิส JS ที่ทันสมัย:

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);
};

— Sergiu
แหล่งที่มา

0

นอกจากนี้ที่สำคัญในการตอบ Travis '; คุณต้องวาง 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>

และเรียกตัวแปร aWidth ที่ใดก็ได้หลังจากนั้น

— burkul
แหล่งที่มา

วิธีรับความกว้างของเบราว์เซอร์โดยใช้รหัส JavaScript

อัปเดตสำหรับปี 2017

คำตอบเดิม