Как я могу сделать так, чтобы каждый раз, когда пользователь менял размер разрешения экрана [не окно браузера], страница выполняет функцию?
Как обнаружить в jquery, если изменяется разрешение экрана?
Ответ 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)
должен делать то, что вы хотите.
Ответ 2
$(window).resize()
$(window).resize(function() {
alert('window was resized!');
});
Ответ 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();
})();
[обновление]
Для тех, кто хочет реализовать 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!');
});
Ответ 4
Поскольку вы можете только из определенного окна браузера проверить изменения в том же окне браузера, невозможно узнать об изменениях разрешения дисплея.
Однако, если окно браузера также изменяется при изменении разрешения экрана, вы можете поймать его с помощью прослушивателя на 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!
Ответ 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>
Ответ 6
Следующая функция запускает изменение размера окна, а также изменение разрешения, а также имеет задержку, чтобы избежать нескольких вызовов, когда пользователь повторно настраивает окно.
Я создал для вас скрипку:
Измените свое разрешение и функция, сообщите об этом. вы можете выполнять любую функцию, что хотите.
Надеюсь, что это поможет.