Listen to browser width / height changes with jQuery

First you want to start with binding the window resize event to a function of your choosing.

$(window).on("resize", methodToFixLayout);

Now you can determine the new heights and widths and make adjustments to the page from there.

function methodToFixLayout( e ) {
    var winHeight = $(window).height();
    var winWidth = $(window).width();
    //adjust elements css etc.....
    //$("#someDiv").css('someProperty',someValue based on winHeight and winWidth);
}

Without more specifics on your layout it’s hard to tell what changes you’ll need exactly but this should get you going in the right direction.

Leave a Comment