jQuery 用户调整窗口大小后获取浏览器宽度和高度

Get browser width and height after user resizes the window

提问by Gregwest85

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?

在用户调整窗口大小后，有没有办法获取浏览器的宽度和高度。例如，如果窗口是 1920 x 1080 并且用户将窗口更改为 500 x 500 有没有办法在 JavaScript 或 jquery 中获取这两个新值？

回答by Pablo Mescher

Pure Javascript answer:

纯 Javascript 答案：

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

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

这在 chrome 上运行良好。但是，它仅适用于 chrome。一个稍微跨浏览器的示例是使用事件目标属性“outerWidth”和“outerHeight”，因为在这种情况下，事件“目标”是窗口本身。代码将是这样的

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);

This works fine in firefox and chrome

这在 Firefox 和 chrome 中运行良好

Hope it helps :)

希望能帮助到你 ：）

Edit: Tested in ie9 and this worked too :)

编辑：在 ie9 中测试，这也有效:)

回答by Jay Bhatt

You can use the JQuery resize() function. Also make sure you add the same resize logic to reload event. If user reloads in the sized window your logic won't work.

您可以使用 JQuery resize() 函数。还要确保添加相同的调整大小逻辑来重新加载事件。如果用户在调整大小的窗口中重新加载，您的逻辑将不起作用。

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

 $(document).ready(function() {
      //same logic that you use in the resize...
  });

回答by keune

It's possible by listening to resizeevent.

可以通过监听resize事件来实现。

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

回答by Ikrom

Practically, I use this and it helps me a lot:

实际上，我使用它，它对我有很大帮助：

    var TO = false;
    var resizeEvent = 'onorientationchange' in window ? 'orientationchange' : 'resize';
    $(window).bind(resizeEvent, function() {
        TO && clearTimeout(TO);
        TO = setTimeout(resizeBody, 200);
    });
    function resizeBody(){
        var height = window.innerHeight || $(window).height();
        var width = window.innerWidth || $(window).width();
        alert(height);
        alert(width);
    }

回答by Honza Kalfus

If you need to know these values to do layout adjustments, I bet you plan on listening to those values. I recommended using the Window.matchmedia()API for that purpose instead.

如果您需要知道这些值来进行布局调整，我敢打赌您打算听取这些值。我建议Window.matchmedia()为此目的使用API。

It is much more performantand is basically the JS equivalent of CSS media queries.

它的性能更高，基本上是 CSS 媒体查询的 JS 等价物。

Very quick example of use:

非常快速的使用示例：

if (window.matchMedia("(max-width: 500px)").matches) {
  /* the viewport is less than or exactly 500 pixels wide */
} else {
  /* the viewport is more than 500 pixels wide */
}

You can also setup a listener that'll get called every time the state of the matchesproperty changes.

您还可以设置一个侦听器，每次matches属性的状态更改时都会调用该侦听器。

See MDN for descriptionand example of using a listener.

有关使用侦听器的说明和示例，请参阅 MDN 。

回答by Abdulmajeed Naji Alshari

Simplest way to get real width and height of an element after window resize as the follow:

调整窗口大小后获取元素实际宽度和高度的最简单方法如下：

<div id="myContainer">
    <!--Some Tages ...  -->
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
    $(function () {
        $(window).resize(function () {
            //The below two lines of codes more Important to clear the previous settings to get the current measure of width and height
            $('#myContainer').css('height', 'unset');
            $('#myContainer').css('width', 'unset');

            var element = $('#myContainer');

            var height = element.height();
            var width = element.width();

            //Below two lines will includes padding but not border 
            var innerHeight = element.innerHeight();
            var innerWidth = element.innerWidth();

            //Below two lines will includes padding, border but no margin 
            var outerHeight = element.outerHeight();
            var outerWidth = element.outerWidth();

            //Below two lines will includes padding, border and margin 
            var outerHeight = element.outerHeight(true);
            var outerWidth = element.outerWidth(true);
        });
    });
</script>  

回答by Anoop

Use jQuery resize method to listen window size change . inside callback you can get height and width.

使用 jQuery resize 方法来监听窗口大小的变化。在回调内部，您可以获得高度和宽度。

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

});

回答by What have you tried

You can use the resizeevent, along with the height()and width()properties

您可以使用该resize事件以及height()和width()属性

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

See some more examples here

在此处查看更多示例