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

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

---

我希望结果是“实时的”，因此如果宽度或高度发生变化，结果也会发生变化。

这应该返回可见区域：

document.body.offsetWidth
document.body.offsetHeight

---

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

你的意思是这样的

window.innerHeight；window.innerWidth

$（window.height（）$（窗口）.width（）

您可以使用

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

 onresize ();// first time;

html:

---

您甚至可以尝试添加重新调整大小的侦听器，如

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

---

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

---

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

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

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

---

我将如何显示结果？在每次onresize调用中，您可以更改结果框的内容。顺便问一下，你在展示什么信息。如果要显示高度和宽度，只需使用：$（'resultboxid'）.html（'height:'+h+'width:'w）；我只是想显示宽度和高度。@user1658756我修改了onresize方法。您可以根据需要更改代码，或者您应该共享代码，以便我可以根据您的代码进行更改“嗯，它不起作用”我认为堆栈溢出上的所有代码片段都应该通过指向JSFIDLE或CodePen的链接共享，或者至少那些使用它的人的声誉应该提高10倍！当演示程序在JSFIDLE中运行时，它会报告演示程序运行的IFrame的大小。当演示在独立页面中运行时，它会报告浏览器视口的大小。我对它进行了两方面的测试。似乎很好。啊，是的，忘了iframe。谢谢是否还有检测实际浏览器高度和宽度的方法？要获取包括菜单和工具栏在内的浏览器大小，请使用

window.outerWidth

和

window.outerHeight

。但是，IE8和更早版本没有这样的选项。请参阅以下帖子：感谢您的代码，但我不会使用“document.body.clientHeight”作为回退，因为它在多个浏览器中给出了错误的值（除非该值在不支持其他两个变量的浏览器中实际上是正确的；顺便说一句，这两个变量是什么？）。

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