我怎样才能使每次用户更改屏幕分辨率大小[而不是浏览器窗口]时，页面执行一个功能？
【问题讨论】：
screen.width和/或screen.height。尽管在这种情况下也可能在窗口上触发resize 事件。那你就不用轮询了，只要附加一个resize事件处理程序，检查screen.X的值是否改变了。
标签： jquery screen screen-resolution
好的，所以你正在使用 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。更改屏幕分辨率时，它们将返回不同的值。更多信息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。正如 Paul Irish 所描述的 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!');
});
【讨论】：
因为您只能在特定的浏览器窗口中检查同一浏览器窗口中的变化，所以无法知道显示器的分辨率变化。
但是，如果浏览器窗口在显示分辨率发生变化时也发生变化，您可以通过 window.width 和 window.height 上的侦听器来捕捉这一点。
edit：看来我们可以从全局“window.screen”对象中获取您想要的信息。请参阅https://developer.mozilla.org/en/DOM/window.screen.height 和https://developer.mozilla.org/en/DOM/window.screen.width 了解更多信息！
【讨论】：
setInterval() 每 x 毫秒检查一次 screen.width 和 screen.height 并在它们发生变化时采取一些措施...
screen.width 和screen.height（IE 的访问器略有不同）返回屏幕分辨率。如果您正在收听window.width 和window.height，为什么不直接使用window.onresize。
试试这个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>
【讨论】：
以下函数会在窗口调整大小和分辨率更改时触发，并且还会延迟以避免在用户调整窗口大小时多次调用。
我在这里为你准备了一个小提琴：
更改您的分辨率和功能会提醒您。你可以执行任何你想要的功能。
希望这会有所帮助。
【讨论】：