Screen

Screen インターフェイスは画面を表し、通常は、現在のウィンドウが描画されている画面であり、 window.screen を使用して取得されます。

なお、ブラウザーはブラウザーのウィンドウの中心がどの画面にあるかを検出することで、報告する現在の画面がどれかを判断します。

プロパティ

Screen.availTop 
オペレーティングシステムによって表示されるウィンドウ上のタスクバーなどの、固定あるいは半固定のユーザーインターフェイス部分を含まない、最初のピクセルの y 座標を指します。
Screen.availLeft 
スクリーンの左端からの、最初の利用可能なピクセルの値を返します。​
Screen.availHeight
固定あるいは半固定のユーザーインターフェイス部分を除いたスクリーンの高さをピクセルで表します。
Screen.availWidth
ウィンドウで利用可能な水平方向のスペースの合計をピクセルで返します。
Screen.colorDepth
画面の色深度を返します。
Screen.height
画面の高さをピクセルで返します。
Screen.left 
メイン画面の左端から現在の画面の左端までの距離をピクセルで返します。
Screen.orientation
現在の画面の向きを返します。
Screen.pixelDepth
画面のピット深度を取得します。
Screen.top 
現在の画面の上端からの距離をピクセルで返します。 
Screen.width
画面の幅を返します。
Screen.mozEnabled   
ブール値。false に設定すると、デバイスの画面がオフになります。
Screen.mozBrightness   
デバイスの画面の明るさをコントロールします。0 から 1.0 までの double で指定します。

イベントハンドラー

Screen.onorientationchange
orientationchange イベントのハンドラー。

メソッド

Screen.lockOrientation
画面の向きをロックします (全画面かインストールしたアプリでのみ動作します)
Screen.unlockOrientation
画面の向きのロックを解除します。 (全画面時かインストールしたアプリでのみ動作します)

メソッドは EventTarget から継承されています。

EventTarget.addEventListener()
Registers an event handler of a specific event type on the EventTarget.
EventTarget.removeEventListener()
Removes an event listener from the EventTarget.
EventTarget.dispatchEvent()
Dispatches an event to this EventTarget.

Additional methods for Mozilla chrome code

Mozilla includes a couple of extensions for use by JS-implemented event targets to implement onevent properties. See also WebIDL bindings.

  • void setEventHandler(DOMString type, EventHandler handler)
  • EventHandler getEventHandler(DOMString type)

if (screen.pixelDepth < 8) {
  // 色数の少ないバージョンのページを使う
} else { 
  // 通常の色数のページを使う
}

仕様書

仕様書 状態 備考
CSS Object Model (CSSOM) View Module
Screen の定義
草案 初回定義

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
ScreenChrome 完全対応 ありEdge 完全対応 ありFirefox 完全対応 ありIE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
availHeightChrome 完全対応 40Edge 完全対応 12
補足
完全対応 12
補足
補足 Always reflects the main screen.
Firefox 完全対応 ありIE ? Opera 完全対応 ありSafari 完全対応 6WebView Android 完全対応 40Chrome Android 完全対応 40Firefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
availLeft
非標準
Chrome 完全対応 ありEdge 未対応 なしFirefox 完全対応 ありIE ? Opera 完全対応 ありSafari 完全対応 6WebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS ? Samsung Internet Android 完全対応 あり
availTop
非標準
Chrome 完全対応 40Edge 未対応 なしFirefox 完全対応 ありIE ? Opera 完全対応 ありSafari 完全対応 6WebView Android 完全対応 40Chrome Android 完全対応 40Firefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS ? Samsung Internet Android 完全対応 あり
availWidthChrome 完全対応 ありEdge 完全対応 12
補足
完全対応 12
補足
補足 Always reflects the main screen.
Firefox 完全対応 ありIE ? Opera 完全対応 ありSafari 完全対応 6WebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
colorDepthChrome 完全対応 40
補足
完全対応 40
補足
補足 Starting with version 59 this property is no longer required to always return 24.
Edge 完全対応 12Firefox 完全対応 ありIE ? Opera 完全対応 ありSafari 完全対応 6WebView Android 完全対応 40
補足
完全対応 40
補足
補足 Starting with version 59 this property is no longer required to always return 24.
Chrome Android 完全対応 40
補足
完全対応 40
補足
補足 Starting with version 59 this property is no longer required to always return 24.
Firefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
heightChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 ありIE ? Opera 完全対応 ありSafari 完全対応 6WebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
left
非標準
Chrome 未対応 なしEdge 完全対応 ありFirefox 完全対応 ありIE ? Opera 未対応 なしSafari 完全対応 ありWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 完全対応 ありOpera Android 未対応 なしSafari iOS ? Samsung Internet Android 未対応 なし
lockOrientationChrome 完全対応 38Edge ? Firefox 完全対応 あり
接頭辞付き
完全対応 あり
接頭辞付き
接頭辞付き moz のベンダー接頭辞が必要
IE 完全対応 11
接頭辞付き
完全対応 11
接頭辞付き
接頭辞付き ms のベンダー接頭辞が必要
Opera 完全対応 ありSafari 未対応 なしWebView Android 完全対応 38Chrome Android 完全対応 38Firefox Android 完全対応 あり
接頭辞付き
完全対応 あり
接頭辞付き
接頭辞付き moz のベンダー接頭辞が必要
Opera Android 完全対応 ありSafari iOS 未対応 なしSamsung Internet Android 完全対応 あり
mozBrightness
非推奨非標準
Chrome 未対応 なしEdge 未対応 なしFirefox 完全対応 12
無効
完全対応 12
無効
無効 From version 12: this feature is behind the dom.screenBrightnessProperty.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 完全対応 14
無効
完全対応 14
無効
無効 From version 14: this feature is behind the dom.screenBrightnessProperty.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
mozEnabled
非推奨非標準
Chrome 未対応 なしEdge 未対応 なしFirefox 完全対応 12
無効
完全対応 12
無効
無効 From version 12: this feature is behind the dom.screenEnabledProperty.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 完全対応 14
無効
完全対応 14
無効
無効 From version 14: this feature is behind the dom.screenEnabledProperty.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
onorientationchangeChrome 未対応 なしEdge 未対応 なしFirefox 未対応 なしIE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 完全対応 あり
代替名
完全対応 あり
代替名
代替名 非標準の名前 onmozorientationchange を使用しています。
Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
orientationChrome 完全対応 38Edge ? Firefox 完全対応 あり
完全対応 あり
完全対応 あり
接頭辞付き
接頭辞付き moz のベンダー接頭辞が必要
IE 完全対応 11
接頭辞付き 補足
完全対応 11
接頭辞付き 補足
接頭辞付き ms のベンダー接頭辞が必要
補足 Not supported on Windows 7.
Opera 完全対応 25Safari 未対応 なしWebView Android 未対応 なしChrome Android 完全対応 39Firefox Android 完全対応 あり
完全対応 あり
完全対応 あり
接頭辞付き
接頭辞付き moz のベンダー接頭辞が必要
Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 完全対応 あり
pixelDepthChrome 完全対応 40
補足
完全対応 40
補足
補足 Starting with version 59 this property is no longer required to always return 24.
Edge 完全対応 12Firefox 完全対応 ありIE ? Opera 完全対応 ありSafari 完全対応 6WebView Android 完全対応 あり
補足
完全対応 あり
補足
補足 Starting with version 59 this property is no longer required to always return 24.
Chrome Android 完全対応 あり
補足
完全対応 あり
補足
補足 Starting with version 59 this property is no longer required to always return 24.
Firefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
top
非推奨非標準
Chrome 未対応 なしEdge 完全対応 ありFirefox 完全対応 ありIE ? Opera 未対応 なしSafari 完全対応 ありWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 完全対応 ありOpera Android 未対応 なしSafari iOS ? Samsung Internet Android 未対応 なし
unlockOrientationChrome 完全対応 38Edge ? Firefox 完全対応 あり
接頭辞付き
完全対応 あり
接頭辞付き
接頭辞付き moz のベンダー接頭辞が必要
IE 完全対応 11
接頭辞付き
完全対応 11
接頭辞付き
接頭辞付き ms のベンダー接頭辞が必要
Opera 完全対応 ありSafari 未対応 なしWebView Android 完全対応 38Chrome Android 完全対応 38Firefox Android 完全対応 あり
接頭辞付き
完全対応 あり
接頭辞付き
接頭辞付き moz のベンダー接頭辞が必要
Opera Android 完全対応 ありSafari iOS 未対応 なしSamsung Internet Android 完全対応 あり
widthChrome 完全対応 40Edge 完全対応 12Firefox 完全対応 ありIE ? Opera 完全対応 ありSafari 完全対応 6WebView Android 完全対応 40Chrome Android 完全対応 40Firefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
非標準。ブラウザー間の互換性が低い可能性があります。
非標準。ブラウザー間の互換性が低い可能性があります。
非推奨。新しいウェブサイトでは使用しないでください。
非推奨。新しいウェブサイトでは使用しないでください。
実装ノートを参照してください。
実装ノートを参照してください。
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。
非標準の名前を使用しています。
非標準の名前を使用しています。
使用するには、ベンダー接頭辞または異なる名前が必要です。
使用するには、ベンダー接頭辞または異なる名前が必要です。