Как определить размер экрана при смене ориентации девайса?

169
05 июля 2017, 00:28

Например я начал смотреть в телефоне сайт. Затем я его перевернул и картинка уже обрезана.

Как определить в jquery, что я сменил ориентацию телефона?

Или скажем сменил размер окна браузера?

Как это определить без перезагрузки страницы?

Answer 1

Вот это с помощью jQuery:

$(window).resize(function(){
    console.log($(window).width());
});

Вообще есть событие resize и оно работает как при простого изменение размера окна так и возникает и при смене ориентации.

А так вы отследите только изменение ориентации:

$(window).on('orientationchange',function(){
    console.log('uraaa');
});

Это событие orientationchange.

Добавил пример после комментариев автора.

$( window ).load( function(){
   w = $( window ).width();
});
$( window ).resize( function(){
  if( w != $( window ).width() ){
    //Здесь ваша логика.
  }
});
Answer 2

Для определения события поворота экрана существует событие orientationchange

window.addEventListener("orientationchange", function() {
    alert("Размер окна теперь равен " + window.width + "px");
});

Для определения события изменения размера окна браузера существует событие resize

window.addEventListener("resize", function() {
    alert("Размер окна теперь равен " + window.width + "px");
});

Поскольку событие resize выстреливает с большой частотой, существует техника, ограничивающее частоту срабатываний для оптимизации производительности.

Вот один из способов на основе requestAnimationFrame:

(function() {
    var throttle = function(type, name, obj) {
        obj = obj || window;
        var running = false;
        var func = function() {
            if (running) { return; }
            running = true;
             requestAnimationFrame(function() {
                obj.dispatchEvent(new CustomEvent(name));
                running = false;
            });
        };
        obj.addEventListener(type, func);
    };
    /* init - you can init any event */
    throttle("resize", "optimizedResize");
})();
// handle event
window.addEventListener("optimizedResize", function() {
    console.log("Да здравствует разумная утилизация ресурсов!");
});
READ ALSO
Добавить класс, чтобы не удалялся

Добавить класс, чтобы не удалялся

есть две кнопки-ссылки

149
Не выводит текст после return

Не выводит текст после return

Я написал такую функцию, которая возвращает и alert'ит сумму двух аргументов:

153
Как работает генерация меню на этом сайте

Как работает генерация меню на этом сайте

Есть cайтНа нём как-бы должно генерироваться фитнес меню питания

174