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

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

3 голосов
/ 29 марта 2012

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

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

При первой загрузке это работает отлично.Однако, если я поверну экран моего телефона в альбомную ориентацию, ширина 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 Ответ

8 голосов
/ 29 марта 2012

Несколько способов попробовать:

(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, поскольку последнее толькодолжен отбрасывать все после десятичной точки.Обычно я просто передаю браузеру необработанное число с плавающей запятой и позволяю ему округлить, где он хочет.

(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;
}
...