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
alert(e.orientation);
// Set height of div
var div = $('#div');
var width = div.width();
// Shows the *old* width, i.e the div width before the rotation
alert(width);
// 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
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;
}
source to share
I recently ran into the same problem and this article helped me a lot. In particular, matchMedia uses the way. https://davidwalsh.name/orientation-change
source to share