автоматически определять изменение ширины окна веб-браузера?

я знаю, что вы с помощью $(window).width() можете получить размер веб-браузера.

я хочу определить, когда пользователь изменяет размер своего веб-браузера, чтобы я мог отрегулировать ширину столбцов. есть ли способ автоматически определить это или мне нужно использовать setTimeinterval для цикла и посмотреть, изменилось ли оно?


javascript browser jquery window detect
person ajsie    schedule 31.01.2010    source источник
comment
Имейте в виду, что если вы хотите изменить свой дизайн (= CSS) при изменении размера экрана, вам нужно медиазапросы. Для этого вам не нужен JS. Например: @media max-width: 700px { body { yourCSS } } будет стилизовать элемент body только тогда, когда ширина экрана меньше 700 пикселей.   -  person Fla    schedule 27.08.2019

Ответы (8)


arrow_upward
49
arrow_downward

Попробуйте событие изменения размера

$(window).resize(function() {
  console.log('window was resized');
});
person PetersenDidIt    schedule 31.01.2010
comment
Это также вызывается масштабированием мобильных браузеров, там должен быть if для ручной проверки размеров по сравнению с предыдущим значением. - person Hoffmann; 30.08.2013
comment
Но это не совсем то, что спрашивали (или то, что я ищу). Если, например, вы загружаете файл в Chrome, появляется панель загрузки внизу страницы, изменяющая высоту вашего браузера и корректно запускающая событие изменения размера. Это не изменение ширины, поэтому вы получаете событие, которое нужно отфильтровать (это то, что я ищу...) - person philw; 12.10.2016

arrow_upward
26
arrow_downward

Записывая это, почему-то ни один из этих ответов не дает современного передового способа сделать это:

window.addEventListener("resize", function(event) {
    console.log(document.body.clientWidth + ' wide by ' + document.body.clientHeight+' high');
})
person B T    schedule 19.01.2017

arrow_upward
21
arrow_downward

Событие JavaScript называется window.onresize.

Привязка JQuery называется .resize().

person Pekka    schedule 31.01.2010

arrow_upward
7
arrow_downward

В MDN они дают действительно хороший автономный код Javascript:

window.onresize = resize;

function resize()
{
 alert("resize event detected!");
}

Если вам нужна именно такая функциональность, я бы порекомендовал пойти на это.

person jasmo2    schedule 19.03.2015

arrow_upward
3
arrow_downward

Что-то, о чем следует помнить: по крайней мере, в IE всплывающие окна событий изменения размера, а позиционированные элементы и тело документа могут запускать независимые события изменения размера.

Кроме того, IE запускает непрерывный поток событий «изменения размера», когда размер окна или элемента изменяется путем перетаскивания. Другие браузеры ждут срабатывания указателя мыши.

IE является достаточно крупным игроком, поэтому полезно иметь промежуточный обработчик, который изменяет размер полей событий, даже если вы передаете ему только клиентов IE.

Обработчик ie устанавливает короткий тайм-аут (100-200 мс) перед вызовом «настоящего» обработчика изменения размера. Если та же функция вызывается снова до истечения времени ожидания, это либо всплывающее событие, либо окно перетаскивается на новый размер, поэтому очистите время ожидания и установите его снова.

person kennebec    schedule 31.01.2010

arrow_upward
3
arrow_downward

Вы можете использовать debounce : https://davidwalsh.name/javascript-debounce-function

В противном случае

window.addEventListener("resize")

Будет срабатывать все время, пока происходит изменение размера окна. Что будет облагать налогом ваши накладные расходы на ЦП.

person Luke Dohner    schedule 17.11.2017

arrow_upward
2
arrow_downward

Вот небольшой фрагмент кода, который я собрал для того же самого.

(function () {
    var width = window.innerWidth;

    window.addEventListener('resize', function () {
       if (window.innerWidth !== width) {
           window.location.reload(true);
       }
    });
})();
person Anshul Sanghi    schedule 27.12.2018

arrow_upward
1
arrow_downward

Я использую media="only screen and (min-width: 750px)" href="... css файл для широких окон" media="only screen and (max-width: 751px)" href="...css file для мобильных"

Когда я перемещаю правую границу окна влево и вправо, чтобы увеличить или уменьшить размер окна, мой веб-браузер автоматически переключается с широкого окна на мобильный. Мне не нужно включать какой-либо код Javascript для определения ширины окна. Это работает для Chrome, Firefox и Internet Explorer на компьютерах Windows и Macintosh.

person Jacob Palme    schedule 27.04.2015