实时检测浏览器大小 - jQuery / JavaScript
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12781205/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Live Detect Browser Size - jQuery / JavaScript
提问by user1658756
Is there a jQuery plugin or a way using straight JavaScript to detect browser size.
是否有 jQuery 插件或使用直接 JavaScript 来检测浏览器大小的方法。
I'd prefer it is the results were 'live', so if the width or height changes, so would the results.
我更喜欢结果是“实时”的，所以如果宽度或高度发生变化，结果也会发生变化。
回答by Matt Coughlin
JavaScript
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
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
Edit:Updated the JavaScript code to support IE8 and earlier.
编辑：更新了 JavaScript 代码以支持 IE8 及更早版本。
回答by Anoop
you can use
您可以使用
function onresize (){
var h = $(window).height(), w= $(window).width();
$('#resultboxid').html('height= ' + h + ' width: ' w);
}
$(window).resize(onresize );
onresize ();// first time;
html:
html：
<span id=resultboxid></span>
回答by Marcus Johansson
This should return the visible area:
这应该返回可见区域：
document.body.offsetWidth
document.body.offsetHeight
I guess this is always equal to the browser size?
我猜这总是等于浏览器大小？
回答by Ritesh Chandora
use width and height variable anywhere you want... when ever browser size change it will change variable value too..
在任何你想要的地方使用宽度和高度变量......当浏览器大小改变时，它也会改变变量值......
$(window).resize(function() {
width = $(this).width());
height = $(this).height());
});
回答by Anton
Do you mean something like this window.innerHeight; window.innerWidth$(window).height(); $(window).width()
你的意思是这样吗 window.innerHeight; window.innerWidth$(window).height(); $(window).width()
回答by Milind Thakkar
You can try adding even listener on re-size like
您可以尝试在重新调整大小时添加偶数侦听器，例如
window.addEventListener('resize',CheckBrowserSize,false);
function CheckBrowserSize()
{
var ResX= document.body.offsetHeight;
var ResY= document.body.offsetWidth;
}
