ブラウザの「全画面表示」（フルスクリーン表示）を判定する（1）/ JavaScript

ブラウザの全画面表示を判定する 

この簡単な事が、現在の JavaScriptでは難しい様です。 ブラウザによってこの状態を取得するコードが統一されていない様です。

 

以下は最初に検索ヒットしたページ。

 

 

上のページでも触れてますが、MDNの下の情報が問題の中心になる情報の様です。

 

 

このMDNの内容を纏めると以下になります。

（MDNはFirefoxを標準とした情報で、Chromeには当てはまらない場合があります）

 

「document.fullscreen」は廃止された非推奨なプロパティで、使えるかは不明。 これに代わって、現在は「document.fullscreenElement」が「null」ではないことで判定できる。

（同ページのブラウザ互換表は、iOS 以外のブラウザは対応となっています） ❝

 

 

使えないプロパティとテストコード 

しかし、私が「Tampermonkey」を使ったユーザースクリプトで試した限り、2025年現在で、ChromeもFirefoxも全画面表示/通常表示でどちらも「null」つまり判定不能でした。 以下がこれをテストしたコードです。

 

「全画面表示の判定コード 🔲」  （このコードでは判定できませんでした）

// ==UserScript==
// @name        全画面表示の判定コード 🔲
// @namespace        http://tampermonkey.net/
// @version        0.1
// @description        フルスクリーン表示の判定　ショートカット「F9」
// @author        Personwritep
// @match        https://*/*
// @noframes
// @grant        none
// ==/UserScript==

document.addEventListener('keydown', function(event){
    if(event.keyCode=='120'){ //「F9」
        alert(
            '　Chrome: '+document.webkitFullscreenElement +'\n'+
            '　Firefox: '+document.fullscreenElement );
 }});

 

 

 

「ウインドウ幅」と「ディスプレイ幅」を比較する 

上記のブラウザが提供するプロパティは、ユーザースクリプトからは使えないのかも知れません。 拡張機能のスクリプトとユーザースクリプトは、ブラウザの機能に対するアクセス可能な範囲が異なる場合がありますから。

 

とにかく「Tampermonkey」上のユーザースクリプトで、「全画面表示」の状態を判定する方法はないか考えた時、案外と簡単な方法が見つかりました。

 

 

各種の幅値を JavaScriptで取得 

JavaScriptは、自らを実行中の「ウインドウ幅」を「window.outerWidth」で取得できます。 ウインドウに関するデータへのアクセス方法は、豊富に用意されています。 以下のページを参照ください。

 

 

 

また同様に、「モニタースクリーンの幅」を「window.screen.width」で取得できます。

 

ディスプレイの画面サイズや色の情報を取得する(screen.width,sreen.height,他)JavaScript を使ってディスプレイの画面サイズや色の情報を取得する方法について解説します。 windows.screen オブジェクトの width プロパティおよび height プロパティでディスプレイの幅と高さを参照することができ、 colorDepth プロパティや pixelDepth プロパティを参照することでディスプレイの色深度やビット…www.javadrive.jp🔗

 

 

簡単な話ですが、この両方のサイズが一致したら「全画面表示」と判定できます。

 

全画面表示と通常表示のウィンドウ幅比較

 

 

下は、これを一般的な判定コードにしたものです。

 

if(window.screen.width==window.outerWidth){ ～ }

 

「全画面表示」の場合に、この条件の判定は「true」になります。

 

 

実行可能なテストコード 

以下は、実際にテスト可能なコードにしたものです。

 

「全画面表示の判定コード 🔲🔲」  （このコードは判定可能）

// ==UserScript==
// @name        全画面表示の判定コード 🔲🔲
// @namespace        http://tampermonkey.net/
// @version        0.2
// @description        フルスクリーン表示の判定　ショートカット「F9」
// @author        Personwritep
// @match        https://*/*
// @noframes
// @grant        none
// ==/UserScript==


document.addEventListener('keydown', function(event){
    if(event.keyCode=='120'){ //「F9」
        ck_width(); }});

function ck_width(){
    if(window.screen.width==window.outerWidth){
        alert("全画面表示"); }
    else{
        alert("通常表示"); }}

 

 

 

扱いは慎重に 

上記の判定コードは「Tampermonkey」上のユーザースクリプトとして有効です。 ただし、この判定方法が必要な場面で正しく機能するかどうかは、テストが必要と思います。

 

何故かこの単純な方法が検索にかかって来ないので、何か問題があるのかと思ってしまいますが、最初に書いたプロパティが全く使えないのに対して、これは大変に有効な方法だと思います。

 

 

 

「FullScreen Check」 全画面表示判定のサンプルツール

このページの判定コードの利用を考慮して、「GitHub」にサンプルツールをアップロードしました。

 

「FullScreen Check」 を「ON」にすると、任意のウェブページで画面左上に判定用の小さなパネルが表示されます。 このパネルは「FullScreen Check」 を「OFF」にするまで消えません。 サンプルツールはテスト時以外は「OFF」にしてください。

 

JavaScriptを実行している現在のウインドウの状態が「F9」押下で判定できます。

 

〔ウインドウ幅による判定〕

 

◎ 通常表示：　　🟢　

 

◎ 全画面表示：　　🟡　

 

〔ウインドウの高さによる判定〕

 

◎ 通常表示：　　🔵　

 

◎ 全画面表示：　　🔴　

 

これだけのツールですが、判定コードが有効な事が簡単に判断できます。

また、このツールのパネルのコードは、各種ツールの制作上で、任意のコードの動作のインジケータとして使えます。「FullScreen Check」では「緑」「黄」「赤」「青」を使っていますが、他に「白」が使えます。

 

 

 「FullScreen Check」のインストール

拡張機能「Tampermonkey」を導入している環境では、「FullScreen Check」は簡単にインストールできます。

 

● 以下のリンクを押すと「Tampermonkey」に 「FullScreen Check」のガイドが起動し、「インストール」ボタンを押すとインストールができます。

 

●「Tampermonkey」の「インストール済み UserScript」の画面を「  リロード」すると、新しい登録が反映します。