Как обнаружить в jquery, если разрешение экрана меняется?

Question

Как я могу сделать так, чтобы каждый раз, когда пользователь изменял размер разрешения экрана [не окна браузера], страница выполняла функцию?

Answer 1

Итак, вы используете JQuery. Итак, давайте сделаем специальное событие для него.

(function () {
    var width = screen.width,
        height = screen.height;
    setInterval(function () {
        if (screen.width !== width || screen.height !== height) {
            width = screen.width;
            height = screen.height;
            $(window).trigger('resolutionchange');
        }
    }, 50);
}());

Сейчас $(window).bind('resolutionchange', fn) должен делать то, что вы хотите.

Answer 2

$(window).resize()

http://api.jquery.com/resize/

$(window).resize(function() {

alert('window was resized!');

});

Answer 3

Попробуйте отслеживать screen.width а также screen.height, Они будут возвращать разные значения при изменении разрешения экрана. Больше информации здесь.

function doSomething(){
    if ( screen.width < 1280 ){
        console.log('Too small')
    }else{
        console.log('Nice!')
    }
}

Однако, насколько я знаю, при изменении разрешения экрана не происходит никаких событий; Что означает, что вы не можете сделать это $(screen).resize(function(){/*code here*/});

Так что еще один способ сделать это будет использовать setTimeout() такие как: [не рекомендуется]

var timer,
    checkScreenSize = function(){
        if ( screen.width < 1280 ){
            console.log('Too small')
        }else{
            console.log('Nice!')
        }
        timer = setTimeout(function(){ checkScreenSize(); }, 50);
    };

checkScreenSize();

Рекомендуемая версия будет использовать requestAnimationFrame. Как описано здесь Полом Ирландским. Потому что, если вы запускаете цикл на невидимой вкладке, браузер не будет его запускать. Для лучшей общей производительности.

// shim layer with setTimeout fallback
window.requestAnimFrame = (function(){
  return  window.requestAnimationFrame       || 
          window.webkitRequestAnimationFrame || 
          window.mozRequestAnimationFrame    || 
          window.oRequestAnimationFrame      || 
          window.msRequestAnimationFrame     || 
          function( callback ){
            window.setTimeout(callback, 1000 / 60);
          };
})();


// usage: 
// instead of setInterval(checkScreenSize, 50) ....

(function loop(){
  requestAnimFrame(loop);
  checkScreenSize();
})();

[Обновить]

Для тех, кто хочет реализовать requestAnimationFrame в ответе Натана, вы идете; Пользовательское событие jQuery, которое вызывается при изменении разрешения, использует requestAnimationFrame, когда доступно для меньшего использования памяти:

window.requestAnimFrame = (function(){
    return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function( callback ){ window.setTimeout(callback, 1000 / 60); };
})();

var width = screen.width,
    height = screen.height,
    checkScreenSize = function () {
        if (screen.width !== width || screen.height !== height) {
            width = screen.width;
            height = screen.height;
            $(window).trigger('resolutionchange');
        }
    };

(function loop(){
  requestAnimFrame(loop);
  checkScreenSize();
})();

Использование:

$(window).bind('resolutionchange', function(){
    console.log('You have just changed your resolution!');
});

Answer 4

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

Однако, если окно браузера также изменяется при изменении разрешения экрана, вы можете поймать это с помощью прослушивателя в window.width и window.height.

редактировать: кажется, мы можем получить информацию, которую вы хотите от глобального объекта 'window.screen'. См. https://developer.mozilla.org/en/DOM/window.screen.height и https://developer.mozilla.org/en/DOM/window.screen.width для получения дополнительной информации!

Answer 5

Попробуйте это JS:

var width = $(window).width();
var height = $(window).height(); 
var screenTimer = null;

function detectScreen (){
    $(window).resize(function() {
      height = $(window).height(); 
      width = $(window).width(); 
        getScreen ();
    });

    function getScreen (){
        return { 'height' : getHeight (), 'width': getWidth () };
    }
    screenTimer = setInterval ( getScreen (), 50 );
}
function getHeight (){
    console.log ( 'height: ' + height);
    $('#height').text(height);
    return height;
}
function getWidth (){
    console.log ( 'width: ' + width);
    $('#width').text(width);
     return width;   
}
detectScreen ();

$('#go').click (function (){
    detectScreen ();
});

$('#stop').click (function (){
    clearInterval(screenTimer);
});

И для HTML:

<span id="stop">Stop</span> | <span id="go">Go</span>
<br>
<div>height: <span id="height"></span> px</div>
<div>width: <span id="width"></span>px </div>

Answer 6

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

Я установил скрипку для вас здесь:

http://jsfiddle.net/EJK5L/

Измените ваше разрешение и функция предупреждает вас. Вы можете выполнять любую функцию, какую хотите.

Надеюсь это поможет.