How do I get the new dimensions of an element * after it has resized due to a change in screen orientation?

I am working on a mobile web app and in my page I have an element div

with its width set to 100%.

I need to set the height of this div

so that the height is correct for a given aspect ratio. So, for example, if the screen size was up to 300px wide and the ratio was 3: 2, my script should grab the width div

(which should be 300px at that point) and set the height to 200px.

On first boot it works fine. However, if I rotate my phone's screen to landscape, the width div

obviously changes, so I need to reset its height to keep the ratio correct.

My problem is that I cannot find the event that fires after the elements are resized. There is an event orientationchange

built into jQuery Mobile that usefully fires when the screen is rotated from portrait to landscape and vice versa:

$(window).bind('orientationchange', function (e) {

    // Correctly alerts 'landscape' or 'portrait' when orientation is changed

    // Set height of div
    var div = $('#div');
    var width = div.width();

    // Shows the *old* width, i.e the div width before the rotation

    // Set the height of the div (wrongly, because width is incorrect at this stage)
    div.css({ height: Math.ceil(width / ratio) });



But this event seems to fire before any of the elements on the page are resized to fit the new location, which means (as pointed out in the comments) I can only get the width before starting the rotation div

, which is not what I need.

Does anyone know how I can get the new width div

after everything has changed?


source to share

2 answers

Several ways to try:

(1) Set a timeout inside the event handler orientationchange

so the DOM can update itself and the browser can do all the changes before polling for the new dimension:

$(window).bind('orientationchange', function (e) { 
    setTimeout(function () {
        // Get height of div
        var div   = $('#div'),
            width = div.width();

        // Set the height of the div
        div.css({ height: Math.ceil(width / ratio) });
    }, 500);


There won't be too much difference, but note that it Math.ceil

takes a lot longer (relatively) than Math.floor

that, since the latter only needs to discard everything after the decimal point. I usually just pass the uncompressed floating point number to the browser and let it go wherever it wants.

(2) Use an event instead window.resize

to see if this update is enough for you:

$(window).bind('resize', function (e) { 
    // Get height of div
    var div   = $('#div'),
        width = div.width();

    // Set the height of the div
    div.css({ height: Math.ceil(width / ratio) });


On mobile, this will work when the orientation changes with the resizing of the browser viewport.

(3) If you are updating the size of this element <div>

because it contains an image, just apply CSS to the image so that it is always full and correct aspect ratio:

.my-image-class {
    width  : 100%;
    height : auto;




I recently ran into the same problem and this article helped me a lot. In particular, matchMedia uses the way.



All Articles