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

如何使每次用户更改屏幕分辨率大小[不是浏览器窗口]时，页面执行function？

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 。 正如Paul Irish所述。 因为如果您在不可见的选项卡中运行循环，浏览器将无法继续运行。 为了更好的整体性能。

 // 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!'); }); 

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：

 Stop | Go 
 
height:  px
 
width: px  

Answer 6

以下函数会触发窗口重新resize以及更改分辨率，并且还会延迟以避免在用户重新调整窗口大小时进行多次调用。

我在这里为你设置了一个小提琴：

http://jsfiddle.net/EJK5L/

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

希望这可以帮助。