Làm cách nào để có chiều rộng trình duyệt bằng mã JavaScript?


180

Tôi đang cố gắng viết một hàm JavaScript để có chiều rộng trình duyệt hiện tại.

Tôi tìm thấy cái này:

javascript:alert(document.body.offsetWidth);

Nhưng vấn đề của nó là nó thất bại nếu cơ thể có chiều rộng 100%.

Có bất kỳ chức năng tốt hơn hoặc một cách giải quyết khác?

Câu trả lời:


133

Cập nhật cho năm 2017

Câu trả lời ban đầu của tôi được viết vào năm 2009. Trong khi nó vẫn hoạt động, tôi muốn cập nhật nó cho năm 2017. Trình duyệt vẫn có thể hoạt động khác đi. Tôi tin tưởng nhóm jQuery sẽ làm tốt công việc duy trì tính nhất quán giữa các trình duyệt. Tuy nhiên, không cần thiết phải bao gồm toàn bộ thư viện. Trong nguồn jQuery, phần có liên quan được tìm thấy trên dòng 37 của width.js . Ở đây nó được trích xuất và sửa đổi để hoạt động độc lập:

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


Câu trả lời gốc

Vì tất cả các trình duyệt hoạt động khác nhau, trước tiên bạn cần kiểm tra các giá trị và sau đó sử dụng chính xác. Đây là một chức năng làm điều này cho bạn:

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

và tương tự cho chiều cao:

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

Gọi cả hai trong số các kịch bản của bạn bằng cách sử dụng getWidth()hoặc getHeight(). Nếu không có thuộc tính gốc nào của trình duyệt được xác định, nó sẽ trả về undefined.


11
Câu trả lời hay nhất vì tôi không phải bao gồm thư viện 33k cho một chuyển hướng đơn giản dựa trên chiều rộng cửa sổ trình duyệt
David Aguirre

1
Điều này tạo ra kết quả đúng (hoặc dự kiến) một cách nhất quán so với triển khai của jQuery.
Emmanuel John

3
... mỗi ba trong số này cho thấy một số kết quả và tất cả các kết quả (độ rộng) là khác nhau. Ví dụ với Google Chrome self.innerWidth 423, hãy xem document.documentElement.clientWidth 326document.body.clientWidth 406. Trong trường hợp câu hỏi như vậy: cái nào đúng và cái nào dùng? Ví dụ tôi muốn thay đổi kích thước google map. 326 hoặc 423 chênh lệch lớn. Nếu chiều rộng ~ 700, thì xem 759, 735, 742 (chênh lệch không quá lớn)
Andris

1
@ user2118559 var pageWidth = Math.max(self.innerWidth || 0, document.documentElement.clientWidth || 0, document.body.clientWidth || 0);var windowWidth = self.innerWidth || -1;// vì "cơ thể" hoặc "màn hình" hoặc "tài liệu" không phải là "cửa sổ" nếu bạn kiểm tra nội dung tràn của html mà bạn có thể hiểu. # i.stack.imgur.com/6xPdH.png
Abdullah Aydın

1
lỗi sao chép-dán trong ví dụ của bạn, getWidth()tham chiếu chức năngself.innerHeight
theGecko

309

Đó là một cơn đau ở mông . Tôi khuyên bạn nên bỏ qua những điều vô nghĩa và sử dụng jQuery , điều này cho phép bạn làm $(window).width().


2
Nếu tôi nhớ lại một cách chính xác, jQuery đã kéo nhiều kích thước vào lõi. Bạn vẫn cần kích thước để làm những gì bạn đang đề xuất?
Nosredna

Hóa ra bạn không. Đó là tuyệt vời. Chỉnh sửa câu trả lời mỗi. Cảm ơn cho những người đứng đầu lên.
hỗn loạn

6
Hỗ trợ $ (window). Thong () trong jQuery là từ phiên bản 1.2, trong trường hợp nó có liên quan đến bất kỳ ai.
hỗn loạn

18
Tôi đã thấy rằng $ (window). Thong () không phải lúc nào cũng trả về cùng một giá trị như InternalWidth / clientWidth theo các ví dụ trong câu trả lời dưới đây. Phiên bản của jQuery không đưa các thanh cuộn trình duyệt vào tài khoản (dù sao trong FF). Điều này gây cho tôi rất nhiều nhầm lẫn với các truy vấn CSS @media dường như kích hoạt ở độ rộng sai. Sử dụng mã gốc có vẻ đáng tin cậy hơn vì nó có sự xuất hiện của các thanh cuộn.
Coder

5
Thêm 30k dòng mã để có chiều rộng cửa sổ là giải pháp 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;

Cả hai số nguyên trả về và không yêu cầu jQuery. Tương thích trình duyệt chéo.

Tôi thường thấy jQuery trả về các giá trị không hợp lệ cho width () và height ()


1
Gặp sự cố khi sử dụng điều này trên Safari iPhone.
nu everest

17

Tại sao không ai nhắc đến matchMedia?

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

Không kiểm tra nhiều, nhưng đã thử nghiệm với trình duyệt Android mặc định và Android chrome, chrome máy tính để bàn, cho đến nay có vẻ như nó hoạt động tốt.

Tất nhiên, nó không trả về giá trị số, nhưng trả về boolean - nếu phù hợp hay không, do đó có thể không chính xác phù hợp với câu hỏi nhưng đó là những gì chúng ta muốn dù sao và có lẽ tác giả của câu hỏi muốn.


1
Chỉ hỗ trợ IE10 +.
qarthandso

17
Nếu họ sử dụng IE9 trở lên, họ không xứng đáng với internet.
Darius.V

Safari iphone dường như không hỗ trợ điều này.
nu everest

Các phiên bản iOS Safari mới hơn nên hỗ trợ matchMedia. Nguồn: caniuse.com/#feat=matchmedia
Vargr

8

Từ W3schools và trình duyệt chéo của nó trở lại thời kỳ đen tối của 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>

Cách tiếp cận hoạt động rất hay và có thể là câu trả lời được chấp nhận, bởi vì nó ngắn hơn nhiều so với bất kỳ giải pháp nào khác (ngoài việc sử dụng jQuery).
Simon Steinberger

2
Sẽ không có lỗi nếu document.documentEuity không được xác định?
PhiLho

6

Đây là một phiên bản ngắn hơn của chức năng được trình bày ở trên:

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
Không trả về giá trị nếu tất cả các điều kiện là sai.
Mike C

10
Bạn không cần elses :)
Nick

0

Một giải pháp phù hợp với câu trả lời của JS hiện đại của Travis:

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

Một bổ sung quan trọng cho câu trả lời của Travis; bạn cần đặt getWidth () trong thân tài liệu của mình để đảm bảo rằng chiều rộng của thanh cuộn được tính, chiều rộng thanh cuộn khác của trình duyệt được trừ từ getWidth (). Tôi đã làm gì ;

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

và gọi biến aWidth ở bất cứ đâu sau đó.

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.