用户调整窗口大小后，获取浏览器的宽度和高度 [英] Get browser width and height after user resizes the window

问题描述

在用户调整窗口大小之后，是否有任何方法可以获取浏览器的宽度和高度.例如，如果窗口是1920 x 1080，而用户将窗口更改为500 x 500，是否有办法在JavaScript或jquery中获得这两个新值?

Is there any way to get the browser width and height after a user has resized the window. For example if the window is 1920 by 1080 and the user changes the window to 500 by 500 is there any way to get those two new values in JavaScript or jquery?

推荐答案

纯Javascript答案:

Pure Javascript answer:

var onresize = function() {
   //your code here
   //this is just an example
   width = document.body.clientWidth;
   height = document.body.clientHeight;
}
window.addEventListener("resize", onresize);

这在chrome上可以正常使用.但是，它仅适用于chrome.跨浏览器的示例稍多一些，它使用事件目标属性"outerWidth"和"outerHeight"，因为在这种情况下，事件目标"是窗口本身.代码就是这样

This works fine on chrome. However, it works only on chrome. A slightly more cross-browser example is using the event target properties "outerWidth" and "outerHeight", since in this case the event "target" is the window itself. The code would be like this

var onresize = function(e) {
   //note i need to pass the event as an argument to the function
   width = e.target.outerWidth;
   height = e.target.outerHeight;
}
window.addEventListener("resize", onresize);

在Firefox和Chrome中效果很好

This works fine in firefox and chrome

希望它会有所帮助:)

在ie9中测试过，它也可以工作:)

Tested in ie9 and this worked too :)

这篇关于用户调整窗口大小后，获取浏览器的宽度和高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！