Get browser width and height after user resizes the window

Question

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?

Answer 1

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

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

This works fine in firefox and chrome

Hope it helps :)

Edit: Tested in ie9 and this worked too :)

Answer 2

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.

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

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 matches property changes.

See MDN for description and example of using a listener.

Answer 3

It's possible by listening to resize event.

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

Answer 4

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.

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

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

Answer 5

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

Answer 6

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

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

});

Answer 7

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

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

See some more examples here

Answer 8

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>  

Answer 9

You can use the event object to get the height and width, I use destructuring assignment and the target points to window:

const handleGetDim = ({ target }) => ({
  width: target.innerWidth,
  height: target.innerHeight,
});

window.addEventListener('resize', handleGetDim);