Limited support 一部のブラウザのみ対応。使用時はサポート状況を確認すること。

Window management

Experimental: これは実験的な機能です。

本番で使用する前にブラウザー互換性一覧表をチェックしてください。

安全なコンテキスト用: この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。

change は Screen インターフェイスのイベントで、次のプロパティのうち 1 つ以上が変化したときに、特定の画面で発行されます。

width

height

availWidth

availHeight

colorDepth

orientation

埋め込み

対応ブラウザ

機能	デスクトップ				モバイル
機能	Chrome	Edge	Firefox	Safari	Chrome Android	Safari iOS
`ScreenDetailed` 実験的	100	100
`requestFullscreen (options screen parameter)` 実験的 options.screen`パラメータ	100	100
`permission_window-management` 実験的ウィンドウ管理`のパーミッション	111	111
`change_event` 実験的 change は Screen インターフェイスのイベントで、次のプロパティのうち 1 つ以上が変化したときに、特定の画面で発行されます。	100	100			100
`isExtended` 実験的 isExtended は Screen インターフェイスの読み取り専用プロパティで、ユーザーの端末が複数の画面を持っている場合は true、持っていない場合は false を返します。	100	100			100
`availLeft` 実験的画面の左端から利用できる最初の有効ピクセルを返します。	100	100
`availTop` 実験的固定あるいは半固定されているユーザーインターフェイス部分を含まない、最初のピクセルの Y 座標を示します。	100	100
`devicePixelRatio` 実験的 ScreenDetailed インターフェイスの devicePixelRatio 読み取り専用プロパティは、画面のデバイスピクセル比を表す数値です。	100	100
`isInternal` 実験的 ScreenDetailed インターフェイスの isInternal 読み取り専用プロパティは、画面がデバイスの内部であるか外部であるかを示すブール値です。外部デバイスは通常、接続されているデバイスとは別に製造され、必要に応じて接続したり切断したりできますが、内部スクリーンはデバイスの一部であり、外部に接続することを目的としていません…	100	100
`isPrimary` 実験的 ScreenDetailed インターフェイスの isPrimary 読み取り専用プロパティは、画面がオペレーティングシステム (OS) のプライマリ画面として設定されているかどうかを示すブール値です。	100	100
`label` 実験的 ScreenDetailed インターフェイスのラベル読み取り専用プロパティは、画面に説明的なラベルを提供する文字列です (たとえば、「内蔵 Retina ディスプレイ」)。	100	100
`left` 実験的メイン画面の左端から現在の画面の左端までの距離をピクセル単位で返します。	100	100
`top` 実験的現在の画面の上端からの距離をピクセル単位で返します。	100	100
`ScreenDetails` 実験的 Window Management API の ScreenDetails インターフェイスは、ユーザーのデバイスで利用できるすべての画面の詳細を表します。	100	100
`currentScreen` 実験的 ScreenDetails インターフェイスの currentScreen 読み取り専用プロパティには、現在のブラウザウィンドウが表示されている画面に関する詳細情報を表す単一の ScreenDetailed オブジェクトが含まれています。	100	100
`currentscreenchange_event` 実験的 ScreenDetails インターフェイスの currentscreenchange イベントは、ScreenDetails.currentScreen が次のいずれかの方法で変更されると発生します。	100	100
`screens` 実験的 ScreenDetails インターフェイスの読み取り専用スクリーンプロパティには、ScreenDetailed オブジェクトの配列が含まれており、各オブジェクトはユーザーのデバイスで利用できる 1 つの特定の画面に関する詳細情報を表します。	100	100
`screenschange_event` 実験的 ScreenDetails インターフェイスの screenchange イベントは、システムで利用できる画面のセットが変更されたとき、つまり、新しい画面が利用可能になったとき、または既存の画面が利用できなくなったときに発生します。これは、ScreenDetails.screens 配列の変更に反映されます。	100	100
`getScreenDetails` 実験的 Window インターフェイスの getScreenDetails() メソッドは、ユーザーのデバイスで利用できるすべての画面の詳細を表す ScreenDetails オブジェクトインスタンスで満たされる Promise を返します。	100	100			100
`moveTo (relative-multi-screen)` マルチスクリーンの原点に対して相対的に移動	100	100	1	1	100	1
`open (relative-multi-screen)` マルチスクリーンの原点を基準に開く	100	100	1	1	100	1
`screenLeft (relative-multi-screen)` マルチスクリーンの原点	100	100	64	1	100	1
`screenTop (relative-multi-screen)` マルチスクリーンの原点	100	100	64	1	100	1
`screenX (relative-multi-screen)` マルチスクリーンの原点	100	100	1	1	100	1
`screenY (relative-multi-screen)` マルチスクリーンの原点	100	100	64	1	100	1
その他
`html.elements.iframe.allow.window-management` 実験的	100	100			100
`http.headers.Permissions-Policy.window-management` 実験的 HTTP の Permissions-Policy ヘッダーにおける window-management ディレクティブは、現在の文書がウィンドウ管理 API を使用して複数のディスプレイ上のウィンドウを管理することを許可するかどうかを制御します。	100	100			100

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

基本構文

JAVASCRIPT

const screenDetails = await window.getScreenDetails();
for (const screen of screenDetails.screens) {
  console.log(screen.label, screen.width, 'x', screen.height);
}
// Open a window on a specific screen
window.open('/dashboard', '_blank',
  `left=${screenDetails.screens[1].left},top=0,width=800,height=600`);

実務での使いどころ

Window management の活用

Experimental: これは実験的な機能です。

注意点

一部のブラウザでのみ対応。使用前にブラウザサポートを確認すること。

対応ブラウザ

基本構文

実務での使いどころ

Window management の活用

注意点

アクセシビリティ

参考リンク