javascript - 实时检测浏览器大小 - jQuery / JavaScript

Question

是否有 jQuery 插件或使用直接 JavaScript 来检测浏览器大小的方法。

我更喜欢结果是“实时”的，所以如果宽度或高度发生变化，结果也会发生变化。

Answer 1

JavaScript

function jsUpdateSize(){
    // Get the dimensions of the viewport
    var width = window.innerWidth ||
                document.documentElement.clientWidth ||
                document.body.clientWidth;
    var height = window.innerHeight ||
                 document.documentElement.clientHeight ||
                 document.body.clientHeight;

    document.getElementById('jsWidth').innerHTML = width;  // Display the width
    document.getElementById('jsHeight').innerHTML = height;// Display the height
};
window.onload = jsUpdateSize;       // When the page first loads
window.onresize = jsUpdateSize;     // When the browser changes size

jQuery

function jqUpdateSize(){
    // Get the dimensions of the viewport
    var width = $(window).width();
    var height = $(window).height();

    $('#jqWidth').html(width);      // Display the width
    $('#jqHeight').html(height);    // Display the height
};
$(document).ready(jqUpdateSize);    // When the page first loads
$(window).resize(jqUpdateSize);     // When the browser changes size

jsfiddle 演示

编辑：更新了 JavaScript 代码以支持 IE8 和更早版本。

Answer 2

您可以使用

function onresize (){
   var h = $(window).height(), w= $(window).width();
   $('#resultboxid').html('height= ' + h + ' width: ' w);
}
 $(window).resize(onresize ); 

 onresize ();// first time;

html:

<span id=resultboxid></span>

Answer 3

这应该返回可见区域：

document.body.offsetWidth
document.body.offsetHeight

我猜这总是等于浏览器的大小？

Answer 4

在任何你想要的地方使用宽度和高度变量......当浏览器大小改变时，它也会改变变量值......

$(window).resize(function() {
    width = $(this).width());
    height = $(this).height());
});

Answer 5

你的意思是这样的吗window.innerHeight; window.innerWidth $(window).height(); $(window).width()

Answer 6

您可以尝试在重新调整大小时添加甚至监听器，例如

window.addEventListener('resize',CheckBrowserSize,false);
function CheckBrowserSize() 
{
    var ResX= document.body.offsetHeight;
    var ResY= document.body.offsetWidth;
}