JS властивість Event.resize

Загальний опис

resize — це подія в JavaScript, яка спрацьовує щоразу, коли користувач змінює розмір вікна браузера. Ця подія призначена для моніторингу змін у висоті та ширині області перегляду (viewport). Важливо, що подія resize генерується тільки на об'єкті window, тому ви завжди маєте прив'язувати обробник події до об'єкта window.

Використання події resize особливо корисне для створення адаптивних вебсайтів, які підлаштовуються під різні розміри екранів або вікон браузера. Наприклад, ви можете динамічно змінювати розташування елементів, їх розміри або навіть завантажувати різні ресурси залежно від розмірів вікна.

Приклад використання:

window.addEventListener('resize', function() {
  let width = window.innerWidth;
  let height = window.innerHeight;
  console.log(`Ширина: ${width}, Висота: ${height}`);
});

У цьому прикладі при кожній зміні розміру вікна виводяться нові значення ширини і висоти вікна браузера в консоль. Подія resize зазвичай використовується для оптимізації відображення сторінки на різних пристроях — від мобільних телефонів до великих екранів. Наприклад, ви можете ввести зміни в макеті, коли вікно стає занадто вузьким або надто широким, динамічно підлаштовуючи елементи під нові умови.

Оскільки подія resize може спрацьовувати дуже часто, важливо обмежувати її використання, щоб не впливати негативно на продуктивність. Це можна зробити за допомогою "дебаунсингу" або "тротлінгу" — технік, які обмежують частоту викликів функцій.

Подія resize може бути корисною для інтерактивних інтерфейсів, де важливо знати точні розміри області перегляду, наприклад, при створенні ігор або графічних інтерфейсів, що адаптуються під користувацьке середовище.

Порада:	При роботі з подією `resize`, враховуйте, що вона може спрацьовувати багаторазово при кожній зміні розміру вікна. Це може призводити до уповільнень, якщо у вас є ресурсомісткі операції. Використовуйте техніки дебаунсингу, щоб зменшити кількість викликів функції.
Порада:	Подія `resize` може бути використана для виявлення орієнтації пристрою на мобільних телефонах, коли змінюється ширина та висота екрану. Це особливо корисно для додатків, які повинні по-різному виглядати в портретному і ландшафтному режимах.
Порада:	Використовуйте медіа-запити в CSS для базової адаптивності, а подію `resize` — для більш складних сценаріїв, наприклад, зміни поведінки JavaScript або динамічного завантаження контенту в залежності від розміру вікна.

Синтаксис

window.addEventListener('resize', function(event) {
  // Ваш код
});

Значення

Return

Переглядачі

Переглядач
	66	57	11.1	53	16

Переглядач
	66	66	57	11.3

Переглядач
	15.0.0	1.0

У цьому прикладі змінюється напрямок контейнера з елементами при зміні розміру вікна. Якщо ширина стає меншою за 600 пікселів, контейнер переходить на вертикальне розташування елементів. Це дозволяє адаптувати макет до малих екранів, таких як смартфони.

window.addEventListener('resize', function() {
  let content = document.getElementById('content');
  
  if (window.innerWidth < 600) {
    content.style.flexDirection = 'column';
  } else {
    content.style.flexDirection = 'row';
  }
});

У цьому прикладі зображення на сторінці динамічно змінюється залежно від ширини вікна браузера. Якщо вікно більше 1200 пікселів, завантажується велике зображення; якщо між 800 і 1200 — середнє; а для вузьких вікон — мале. Це корисно для оптимізації завантаження зображень на різних пристроях.

window.addEventListener('resize', function() {
  let img = document.getElementById('dynamicImage');

  if (window.innerWidth > 1200) {
    img.src = 'large-image.jpg';
  } else if (window.innerWidth > 800) {
    img.src = 'medium-image.jpg';
  } else {
    img.src = 'small-image.jpg';
  }
});

JS довідник

JavaScript

Наповнення JS розділу