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 може бути використана для виявлення орієнтації пристрою на мобільних телефонах, коли змінюється ширина та висота екрану. Це особливо корисно для додатків, які повинні по-різному виглядати в портретному і ландшафтному режимах.

автор: Bond правити

Порада

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

автор: Bond правити

Порада

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

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

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

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі Серверні переглядачі

Підтримка: стаціонарні переглядачі

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

Підтримка: мобільні переглядачі

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

Підтримка: серверні переглядачі

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

Приклади

+ запропонувати свій приклад у пісочниці

<div id="content">Демонстраційний елемент</div>

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

<img id="dynamicImage" src="/img/logo.svg" width="100" alt="Демонстраційне зображення">

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';
  }
});