it-roy-ru.com

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

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

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

23
ajsie

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

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

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

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

20
Pekka 웃

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

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

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

window.onresize = resize;

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

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

5
jasmo2

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

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

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

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

3
kennebec

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

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

window.addEventListener("resize")

Будет срабатывать все время, пока происходит изменение размера окна.

0
Luke Dohner

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

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

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

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

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

0
Jacob Palme