Kích thước trình duyệt (chiều rộng và chiều cao)

Question

Tôi đang cố gắng phát hiện kích thước hiện tại của trình duyệt (chiều rộng và chiều cao). Tôi biết nó là siêu dễ dàng trong jQuery với $(document).width and $(document).height, nhưng tôi không muốn thêm kích thước của lib jQuery cho dự án, vì vậy tôi chỉ muốn sử dụng được xây dựng trong JavaScript. Điều gì sẽ là cách ngắn và hiệu quả để làm điều tương tự với JavaScript?

Answer 1

// first get the size from the window 
// if that didn't work, get it from the body 
var size = { 
    width: window.innerWidth || document.body.clientWidth, 
    height: window.innerHeight || document.body.clientHeight 
} 

Answer 2

Hãy thử điều này;

<script type="text/javascript"> 
winwidth=document.all?document.body.clientWidth:window.innerWidth; 
winHeight=document.all?document.body.clientHeight:window.innerHeight; 
alert(winwidth+","+winHeight); 
</script> 

Answer 3

function getWindowSize(){ 
var d= document, root= d.documentElement, body= d.body; 
var wid= window.innerWidth || root.clientWidth || body.clientWidth, 
hi= window.innerHeight || root.clientHeight || body.clientHeight ; 
return [wid,hi] 
} 

trình duyệt IE là những người duy nhất không sử dụng innerHeight và Width.

Nhưng không có 'chuẩn' - chỉ triển khai trình duyệt.

Kiểm tra html (document.documentElement) clientHeight trước khi kiểm tra body- nếu nó không phải là 0, nó là chiều cao của 'viewport' và body.clientHeight là chiều cao của thân thể - có thể lớn hơn hoặc nhỏ hơn cửa sổ.

Chế độ lùi trả về 0 cho phần tử gốc và chiều cao cửa sổ (khung nhìn) từ phần thân.

Cùng với chiều rộng.

Answer 4

Trường hợp sử dụng của tôi cho window.innerWidth liên quan đến việc xây dựng cửa sổ bật lên tùy chỉnh theo phương thức. Đơn giản chỉ cần đặt, người dùng nhấp vào nút, cửa sổ bật lên sẽ mở ra ở giữa trình duyệt và có một bkgd màu đen trong suốt phía sau cửa sổ bật lên. Vấn đề của tôi là tìm chiều rộng và chiều cao của trình duyệt để tạo bkgd trong suốt.

window.innerWidth hoạt động tốt để tìm chiều rộng nhưng hãy nhớ window.innerWidth and window.innerHeight không bù cho thanh cuộn, vì vậy nếu nội dung của bạn vượt ra ngoài khu vực nội dung hiển thị. Tôi đã phải trừ đi 17px so với giá trị.

transBkgd.style.width = (window.innerWidth - 17) + "px"; 

Vì nội dung của trang web luôn vượt quá chiều cao nhìn thấy được, tôi không thể sử dụng window.innerHeight. Nếu người dùng cuộn xuống bkgd trong suốt sẽ kết thúc tại thời điểm đó và điều đó trông khó chịu. Để duy trì bkgd trong suốt đến tận đáy nội dung tôi đã sử dụng document.body.clientHeight.

transBkgd.style.height = document.body.clientHeight + "px"; 

Tôi đã kiểm tra cửa sổ bật lên trong IE, FF, Chrome và có vẻ tốt trên bảng. Tôi biết điều này không theo câu hỏi ban đầu quá nhiều nhưng tôi con số nó có thể giúp đỡ nếu bất cứ ai khác chạy vào cùng một vấn đề khi tạo một phương thức tùy chỉnh bật lên.

Answer 5

Đây là một mẫu mã

function getSize(){ 

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

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


}