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

Question

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

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

Answer 1

Попробуйте событие resize

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

Answer 2

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

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

Answer 3

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

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

Answer 4

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

window.onresize = resize;

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

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

Answer 5

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

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

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

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

Answer 6

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

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

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

Answer 7

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

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

window.addEventListener("resize")

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

Answer 8

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

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