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

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

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

Ответ 1

Попробуйте изменить размер

$(window).resize(function() {
  console.log('window was resized');
});

Ответ 2

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

Связывание JQuery называется .resize()

Ответ 3

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

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

Ответ 4

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

window.onresize = resize;

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

Ответ 5

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

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

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

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

Ответ 6

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

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

Ответ 7

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

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

window.addEventListener("resize")

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