Làm cách nào để có được kích thước của cửa sổ trình duyệt bằng Prototype.js?

Question

Làm cách nào để có được kích thước của cửa sổ trình duyệt bằng cách sử dụng phiên bản Prototype.js 1.6.0.3?

Answer 1

Đây là giải pháp của tôi cung cấp cho các giá trị tương tự như thanh công cụ Web Developer trong Firefox.

var WindowSize = Class.create({ 
    width: function() 
    { 
     var myWidth = 0; 
     if (typeof(window.innerWidth) == 'number') 
     { 
      //Non-IE 
      myWidth = window.innerWidth; 
     } 
     else if (document.documentElement && document.documentElement.clientWidth) 
     { 
      //IE 6+ in 'standards compliant mode' 
      myWidth = document.documentElement.clientWidth; 
     } 
     else if (document.body && document.body.clientWidth) 
     { 
      //IE 4 compatible 
      myWidth = document.body.clientWidth; 
     } 
     return myWidth; 
    }, 
    height: function() 
    { 
     var myHeight = 0; 
     if (typeof(window.innerHeight) == 'number') 
     { 
      //Non-IE 
      myHeight = window.innerHeight; 
     } 
     else if (document.documentElement && document.documentElement.clientHeight) 
     { 
      //IE 6+ in 'standards compliant mode' 
      myHeight = document.documentElement.clientHeight; 
     } 
     else if (document.body && document.body.clientHeight) 
     { 
      //IE 4 compatible 
      myHeight = document.body.clientHeight; 
     } 
     return myHeight; 
    } 
}); 

Answer 2

Theo API Prototype documentation:

var viewport = document.viewport.getDimensions(); // Gets the viewport as an object literal 
var width = viewport.width; // Usable window width 
var height = viewport.height; // Usable window height 

Answer 3

Và ý tưởng tương tự nhưng nhỏ gọn hơn:

var WindowSize = Class.create({ 
    width: window.innerWidth || (window.document.documentElement.clientWidth || window.document.body.clientWidth), 
    height: window.innerHeight || (window.document.documentElement.clientHeight || window.document.body.clientHeight) 
}); 

Answer 4

này hoạt động trên tất cả các trình duyệt hiện đại và IE6 +:

var w = document.documentElement.clientWidth; 
var h = document.documentElement.clientHeight; 

Một DOCTYPE đúng là cần thiết