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。更改屏幕分辨率时，它们将返回不同的值。更多信息here。

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。正如保罗爱尔兰所描述的here所述。因为如果您在不可见的选项卡中运行循环，浏览器将无法继续运行。为了更好的整体表现。

// 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's answer中实现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/

更改您的分辨率和功能提醒您。你可以执行任何功能，你想要什么。

希望这有帮助。

如何在jquery中检测屏幕分辨率是否发生变化？

6 个答案:

的 [更新]