Resize observer | Frontend Practical Guide

対応ブラウザ

機能	デスクトップ				モバイル
機能	Chrome	Edge	Firefox	Safari	Chrome Android	Safari iOS
`ResizeObserver`	64	79	69	13.1	64	13.4
`disconnect` disconnect() は ResizeObserver インターフェイスのメソッドで、すべての監視されている Element または SVGElement をターゲットとした監視を解除します。	64	79	69	13.1	64	13.4
`observe` observe() は ResizeObserver インターフェイスのメソッドで、指定された Element または SVGElement の監視を開始します。	64	79	69	13.1	64	13.4
`observe (options box parameter)` `options.box` パラメータ	84	84	69	15.4	84	15.4
`ResizeObserver` ResizeObserver コンストラクターは新しい ResizeObserver オブジェクトを作成し、これを Element のコンテンツまたは境界ボックス、または SVGElement のバウンディングボックスに対する変更を報告するために使用することができます。	64	79	69	13.1	64	13.4
`unobserve` unobserve() は ResizeObserver インターフェイスのメソッドで、指定された Element または SVGElement の監視を終了します。	64	79	69	13.1	64	13.4
`ResizeObserverEntry` ResizeObserverEntry インターフェイスは、 ResizeObserver.ResizeObserver コンストラクターのコールバック関数に渡されるオブジェクトを表します。これにより、監視対象の Element または SVGElement の新しい寸法にアクセスすることができます。	64	79	69	13.1	64	13.4
`borderBoxSize` borderBoxSize は ResizeObserverEntry インターフェイスの読み取り専用プロパティで、コールバック実行時に、監視された要素の新しい境界ボックスサイズを含む配列を返します。	84	84	92	15.4	84	15.4
`contentBoxSize` contentBoxSize は ResizeObserverEntry インターフェイスの読み取り専用プロパティで、コールバック実行時に、監視された要素の新しいコンテンツボックスサイズを含む配列を返します。	84	84	92	15.4	84	15.4
`contentRect` contentRect は ResizeObserverEntry インターフェイスの読み取り専用プロパティで、コールバックが実行されたときに DOMRectReadOnly オブジェクトの形で監視中の要素の新しい寸法を返します。なお、これは ResizeObserverEntry.borderBoxSize や ResizeObserverEntry.contentBoxSize よりも広く対応されていますが、 Resize Observer API では早期に除外され、現在は互換性の目的で仕様書に存在しているため、将来のバージョンでは非推奨になる可能性があります。	64	79	69	13.1	64	13.4
`devicePixelContentBoxSize` devicePixelContentBoxSize は ResizeObserverEntry インターフェイスの読み取り専用プロパティで、コールバック実行時に、監視されている要素のデバイスピクセル単位のサイズを含む配列を返します。	84	84	93		84
`target` target は ResizeObserverEntry インターフェイスの読み取り専用プロパティで、監視対象の Element または SVGElement への参照を返します。	64	79	69	13.1	64	13.4
`ResizeObserverSize` Resize Observer API の ResizeObserverSize インターフェースは、ResizeObserverEntry インターフェースによって、監視対象の要素のボックスサイズ設定プロパティにアクセスするために使用されます。	84	84	69	15.4	84	15.4
`blockSize` ResizeObserverSize インターフェースの read-only プロパティである blockSize は、監視対象の要素の境界ボックスのブロック方向の長さを返します。水平書き込みモードのボックスでは、これは垂直方向の寸法（高さ）になります。書き込みモードが垂直の場合、これは水平方向の寸法（幅）になります。	84	84	69	15.4	84	15.4
`inlineSize` ResizeObserverSize インターフェースの read-only プロパティである inlineSize は、監視対象の要素の境界ボックスのインライン方向の長さを返します。水平方向の書き込みモードを持つボックスの場合、これは水平方向の寸法、つまり幅になります。書き込みモードが垂直方向の場合、これは垂直方向の寸法、つまり高さになります。	84	84	69	15.4	84	15.4

1+対応 (バージョン) 未対応 ※注釈ありサブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

JAVASCRIPT

const h1Elem = document.querySelector("h1");
const pElem = document.querySelector("p");
const divElem = document.querySelector("body > div");
const slider = document.querySelector('input[type="range"]');
const checkbox = document.querySelector('input[type="checkbox"]');

divElem.style.width = "600px";

slider.addEventListener("input", () => {
  divElem.style.width = `${slider.value}px`;
});

const resizeObserver = new ResizeObserver((entries) => {
  for (const entry of entries) {
    if (entry.contentBoxSize) {
      const contentBoxSize = entry.contentBoxSize[0];
      h1Elem.style.fontSize = `${Math.max(
        1.5,
        contentBoxSize.inlineSize / 200,
      )}rem`;
      pElem.style.fontSize = `${Math.max(
        1,
        contentBoxSize.inlineSize / 600,
      )}rem`;
    } else {
      h1Elem.style.fontSize = `${Math.max(
        1.5,
        entry.contentRect.width / 200,
      )}rem`;
      pElem.style.fontSize = `${Math.max(1, entry.contentRect.width / 600)}rem`;
    }
  }

  console.log("Size changed");
});

resizeObserver.observe(divElem);

checkbox.addEventListener("change", () => {
  if (checkbox.checked) {
    resizeObserver.observe(divElem);
  } else {
    resizeObserver.unobserve(divElem);
  }
});

実務での使いどころ

Resize observer の活用

ResizeObserver インターフェイスは、要素 (Element) のコンテンツまたは境界ボックス、または SVGElement のバウンディングボックスの大きさが変化したことを報告します。

注意点

古いブラウザでは対応していない場合がある。

実装メモ

一部の API はセキュアコンテキスト (HTTPS) やユーザー操作起点を必要とする。利用前に要件を確認すること。

対応ブラウザ

基本構文

実務での使いどころ

Resize observer の活用

注意点

実装メモ

参考リンク