Как получить новые размеры элемента *после * изменения его размера из-за изменения ориентации экрана?

Я работаю над мобильным веб-приложением, и на моей странице есть элемент div, ширина которого установлена на 100%.

Мне нужно установить высоту этого div так, чтобы высота была правильной для заданного соотношения сторон. Так, например, если экран был размером до 300 пикселей в ширину и соотношение было 3: 2, мой скрипт должен захватить ширину div (которая в этот момент должна быть 300px) и установить высоту до 200px.

При первой загрузке это работает отлично. Однако, если я поверну экран моего телефон в ландшафте, ширина div очевидно меняется, поэтому мне нужно сбросить его высоту, чтобы сохранить правильное соотношение.

Моя проблема заключается в том, что я не могу найти событие, которое запускаетпосле изменения размера элементов. В jQuery Mobile встроено событие orientationchange, которое срабатывает при повороте экрана с портретной на альбомную и наоборот:

$(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's 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) });

});

Но это событие, кажется, срабатывает до того, как какой-либо из элементов на странице изменил размер, чтобы соответствовать новая компоновка, которая означает (как упоминалось в комментариях), что я могу получить только ширину предварительного поворота div, что мне не нужно.

Кто-нибудь знает, как я могу получить новую ширину div, после того, как вещи изменили свои размеры?

1 3
javascript jquery mobile jquery-mobile

1 ответ:

Несколько методов для вас, чтобы попробовать:

(1) установите тайм-аут внутри вашего обработчика событий orientationchange, чтобы DOM мог обновить себя и браузер мог нарисовать все изменения, прежде чем вы опросите новое измерение: 

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

Это не будет иметь слишком большого значения, но обратите внимание, что Math.ceil занимает намного больше времени для завершения (относительно), чем Math.floor, так как последний должен только отбросить все после десятичной точки. Я обычно просто передаю браузеру незатронутое число float и даю ему округлиться куда захочет.

(2) используйте вместо этого событие window.resize, чтобы увидеть, достаточно ли быстро оно обновляется для вас: 

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

На мобильном устройстве это срабатывает при изменении ориентации, так как размер окна просмотра браузера также изменится.

(3) Если вы обновляете размер этого элемента <div>, потому что он содержит изображение, просто примените некоторый CSS к изображению, чтобы оно всегда было полноразмерным и имело правильное соотношение сторон: 

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