Я знаю, что вы с $ (window) .width() можете получить размер веб-браузера.автоматически определяет изменение ширины окна браузера?
Я хочу определить, когда пользователь изменит размер своего веб-браузера, чтобы я мог скорректировать ширину столбцов. есть ли способ автоматически обнаружить это или мне нужно использовать setTimeinterval для цикла и посмотреть, изменилось ли оно?
Попробуйте resize event
$(window).resize(function() {
console.log('window was resized');
});
Событие JavaScript назван window.onresize.
JQuery связывание называется .resize()
Что-то, чтобы держать в mind- в IE, по крайней мере, изменить размер событий пузырь, и расположение элементов, и тело документа может сгореть независимые изменения размера событий.
Кроме того, IE запускает непрерывный поток событий «изменения размера» при изменении размера окна или элемента путем перетаскивания. Другие браузеры ждут, пока мышь начнет стрелять.
IE является достаточно большим игроком, что полезно иметь промежуточного обработчика, который изменяет размеры полей, даже если вы введете в него только IE-клиенты.
Обработчик ie устанавливает короткий тайм-аут (100-200 мс) перед вызовом «реального» обработчика изменения размера. Если одна и та же функция снова вызывается перед таймаутом, это либо событие пузырька, либо окно перетаскивается в новый размер, поэтому очистите тайм-аут и установите его снова.
В MDN они дают очень хороший код Javascript автономный:
window.onresize = resize;
function resize()
{
alert("resize event detected!");
}Если вам нужен именно такой функциональности я рекомендовал бы пойти на это.
Я использую СМИ = "только экран и (мин-ширина: 750px)" HREF = "... CSS файл для широких окон" СМИ = "только экран и (макс-ширина: 751px)" HREF = «... css-файл для мобильных телефонов»
Когда я перемещаю правую рамку окна влево и вправо, чтобы увеличить и уменьшить размер моего окна, мой веб-браузер автоматически переключится с широкого окна на мобильный. Мне не нужно включать какой-либо Javascript-код для определения ширины окна. Это работает для Chrome, Firefox и Internet Explorer на компьютерах Windows и Macintosh.
Дать это вниз причина почему-то ни один из этих ответов не дают современные рекомендуемым методам способ сделать это:
window.addEventListener("resize", function(event) {
console.log(document.body.clientWidth + ' wide by ' + document.body.clientHeight+' high');
})
Вы можете захотеть использовать debounce: https://davidwalsh.name/javascript-debounce-function
В противном случае
window.addEventListener("resize")
Будет срабатывать все время по мере изменения размера окна. Которая будет облагать налогом ваш центральный процессор.
Это также срабатывает при использовании мобильных браузеров zoom, должно быть, если нужно вручную проверить размеры по сравнению с предыдущим значением. – Hoffmann
Но это не совсем то, что было задано (или то, что я ищу). Если, например, вы загружаете файл в хром, появляется панель «загрузки» на странице внизу, изменяя высоту браузера и правильно запуская событие изменения размера. Это не изменение ширины, поэтому вы получаете событие, которое вам нужно отфильтровать (это то, что я ищу ...) – philw