画面利用可能領域（availWidth、availHeight）

画面利用可能領域

screenオブジェクトはOS要素を除外した使用可能な表示領域を記述するプロパティを提供します。

プロパティ

プロパティ	説明
screen.availWidth	OS UI（サイドのタスクバーなど）を除いた画面幅
screen.availHeight	OS UI（macOSメニューバー＋Dock）を除いた画面高さ
screen.availTop	使用可能領域のYオフセット
screen.availLeft	使用可能領域のXオフセット

ポップアップの配置

function openCenteredPopup(url, w, h) {
  const left = screen.availLeft + (screen.availWidth - w) / 2;
  const top = screen.availTop + (screen.availHeight - h) / 2;
  window.open(
    url, '_blank',
    'width=' + w + ',height=' + h + ',left=' + left + ',top=' + top
  );
}

マルチモニター環境

マルチモニター構成では、セカンダリモニターがプライマリの左側や上側に配置されている場合、availLeftとavailTopが負の値になることがあります。