Будет ли $(window).resize() огонь по изменению ориентации?

Я использую это для запуска некоторого кода при изменении размера окна браузера: $(window).resize(callback)

Мне также нужно запустить этот код, когда ориентация изменяется в телефонах и планшетах. Будет ли вышеупомянутый огонь на этом событии?

Ответ 1

Некоторые устройства/браузеры, некоторые нет. Вам необходимо определить поддерживаемые браузеры и устройства.

Если вы хотите быть на стороне безопасности, вы должны использовать событие изменения размера и получить/проверить размеры внутри; если вы знаете, что нужные устройства идут с простым изменением ориентации:

Простое решение:

// Listen for orientation changes      
window.addEventListener("orientationchange", function() {
    // Announce the new orientation number
    alert(window.orientation);
}, false);

Более безопасный/поддерживаемый

// Listen for resize changes
window.addEventListener("resize", function() {
    // Get screen size (inner/outerWidth, inner/outerHeight)

}, false);

Дэвид Уолш написал хорошую статью о событиях изменения размера и ориентации. Подробнее об изменении ориентации и размерах здесь: http://davidwalsh.name/orientation-change

Ответ 2

Мое решение:

Создайте событие, когда ориентация не делает этого
использовать дроссель, чтобы не допустить значительного обновления при изменении размера (например, библиотеки lodash)

window.addEventListener("resize", throttle(function() {
    //to do when resize
}, 50), false);

window.addEventListener("orientationchange", function() {
    // Generate a resize event if the device does not do it
    window.dispatchEvent(new Event("resize"));
}, false);

Ответ 3

ответ imho: нет

но:

$(window).on('resize orientationchange', function(){
//do stuff
});

ты должен был покрыть

осторожно, это может срабатывать дважды в зависимости от браузера

Ответ 4

Простое решение - передать значение в зависимости от типа события.

window.addEventListener('resize', function () {
    myFunction('resize');
});

window.addEventListener("orientationchange", function() {
    myFunction('orientation');
});

function myFunction(value) {
    if (value == 'resize') {
       // do something
    } else if (value == 'orientation') {
       // do something else
    }
}