如何在jquery中检测屏幕分辨率是否发生变化？
如何使每次用户更改屏幕分辨率大小[不是浏览器窗口]时，页面执行function？
好的，所以你正在使用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)应该做你想要的。
$(window).resize()
$(window).resize(function() { alert('window was resized!'); });
尝试跟踪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!'); });
因为您只能在特定浏览器窗口内检查同一浏览器窗口内的更改，所以无法了解显示器的分辨率更改。
但是，如果浏览器窗口在显示分辨率更改时也会更改，则可以使用window.width和window.height上的侦听器来捕获它。
编辑：我们似乎可以从全局“window.screen”对象中获取您想要的信息。 有关详细信息，请参阅https://developer.mozilla.org/en/DOM/window.screen.height和https://developer.mozilla.org/en/DOM/window.screen.width ！
试试这个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
以下函数会触发窗口重新resize以及更改分辨率，并且还会延迟以避免在用户重新调整窗口大小时进行多次调用。
我在这里为你设置了一个小提琴：
更改您的分辨率和function提醒您。 你可以执行任何function，你想要什么。
希望这可以帮助。