JavaScriptで画面サイズの変化を検知する方法

目的に合うAPIを選ぶ

旧記事はjQueryのload・resizeイベントを中心にしていましたが、現在は「何の変化を知りたいか」でAPIを選びます。

ウィンドウ寸法ならresize、CSSメディアクエリとの一致ならmatchMedia、特定要素のサイズならResizeObserverが適しています。

ブレークポイントの変化はmatchMedia

const media = window.matchMedia('(width <= 768px)');

function handleBreakpoint(event) {
  document.body.classList.toggle('is-mobile', event.matches);
}

media.addEventListener('change', handleBreakpoint);
handleBreakpoint(media);

要素サイズはResizeObserver

コンポーネント自身の幅に応じて処理したい場合、ウィンドウのresizeを監視するより意図が明確です。不要になったらunobserveまたはdisconnectします。

const target = document.querySelector('.chart');
const observer = new ResizeObserver(([entry]) => {
  const width = entry.contentRect.width;
  target.dataset.size = width < 480 ? 'compact' : 'wide';
});
observer.observe(target);

resizeイベントを使う場合

resizeは短時間に何度も発火します。重い処理を直接実行せず、requestAnimationFrameやdebounceで頻度を抑えます。CSSだけで解決できるレイアウト調整はCSSへ任せます。

let scheduled = false;
window.addEventListener('resize', () => {
  if (scheduled) return;
  scheduled = true;
  requestAnimationFrame(() => {
    console.log(window.innerWidth);
    scheduled = false;
  });
});

参考資料

• MDN: matchMedia
• MDN: ResizeObserver
• MDN: resize event