如何在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();
})();

[更新]

对于那些想在Nathan的答案中实现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!');
});