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:
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() );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.
self.innerWidth 423, hãy xem document.documentElement.clientWidth 326và document.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)
var pageWidth = Math.max(self.innerWidth || 0, document.documentElement.clientWidth || 0, document.body.clientWidth || 0);và 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
getWidth()tham chiếu chức năngself.innerHeight
Đó 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().
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 ()
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.
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>Đâ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;
}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);
};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 đó.