web-dev-qa-db-ja.com

ブラウザが全画面モードかどうかの検出

ブラウザが全画面モードで実行されているかどうかを確実に検出する方法はありますか？クエリできるブラウザーAPIがないことは確かですが、DOMによって公開されている特定の高さ/幅の測定値を調べて比較することで解決した人はいますか？特定のブラウザーでのみ機能する場合でも、そのことについて知りたいと思います。

javascriptdombrowserfullscreen
43
Simon Lieschke

Chrome 15、Firefox 10、およびSafari 5.1は、プログラムでフルスクリーンモードをトリガーするAPIを提供するようになりました。この方法でトリガーされたフルスクリーンモードは、フルスクリーンの変更を検出するイベントと、フルスクリーン要素のスタイルを設定するためのCSS疑似クラスを提供します。

詳細は this hacks.mozilla.org blog post を参照してください。

15
Simon Lieschke

ビューポートの幅と解像度の幅の間の距離を決定するのはどうですか？ピクセル数が少ない場合（特に高さの場合）mayはフルスクリーンになります。

ただし、これは信頼できません。

8
alex

Operaはフルスクリーンを別のCSSメディアタイプとして扱います。彼らはそれを Opera Show と呼び、簡単に自分で制御できます。

@media projection {
  /* these rules only apply in full screen mode */
}

Opera @ USB と組み合わせると、個人的に非常に便利です。

8
Roger Pate

頭をぶつけている人を救うために、私は自分のイライラを追加すると思いました。最初の答えは、プロセスを完全に制御できる場合、つまりコードでフルスクリーンプロセスを開始する場合に最適です。誰もがF11を押してこれを行う必要はありません。

地平線上の希望のかすかな光は、このW3C勧告 http://www.w3.org/TR/view-mode/ の形で提供されます。これにより、ウィンドウ処理された、フローティング（クロムなし）の検出が可能になります。 、最大化、最小化、フルスクリーンのメディアクエリ（もちろん、window.matchMediaとその関連を意味します）。

-webkitと-mozプレフィックスを使用した実装プロセスにあるという兆候を見たことがありますが、まだ本稼働中ではないようです。

ですから、解決策はありませんが、同じ壁にぶつかる前に、走り回る多くの人を救うことができれば幸いです。

PS *：-moz-full-screenは、doo-dahも行いますが、知っておくと便利です。

5
Paul Duffy

Firefox 3以降では、ブラウザが全画面モードかどうかを報告するwindowオブジェクトに非標準のプロパティが用意されています。 window.fullScreen 。

4
Simon Lieschke

document.fullscreenElementはnullではなく、フルスクリーンモードがオンかどうかを決定します。それに応じて、ベンダープレフィックスfullscreenElementを指定する必要があります。私はこのようなものを使用します：

var fullscreenElement = document.fullscreenElement || document.mozFullScreenElement ||
document.webkitFullscreenElement || document.msFullscreenElement;

https://msdn.Microsoft.com/en-us/library/dn312066（v = vs.85）.aspx は、この良い例を以下に引用します。

document.addEventListener("fullscreenChange", function () {
          if (fullscreenElement != null) {
              console.info("Went full screen");
          } else {
              console.info("Exited full screen");              
          }
      });
3
Parth

正しい。これは完全に遅い...

2014年11月25日（執筆時点）では、要素がフルスクリーンアクセスをリクエストし、続いてフルスクリーンモードの開始/終了を制御することが可能です。

MDNの説明はこちら： https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode

David Walshによる簡単な説明： http://davidwalsh.name/fullscreen

2
Abhishek

Chrome少なくとも：

onkeydownは、F11キーが押されてフルスクリーンに入るのを検出するために使用できます。 onkeyupは、フルスクリーンを終了するためにF11キーが押されたことを検出するために使用できます。

keyCode == 122のチェックと組み合わせて使用​​します

トリッキーな部分は、キーダウン/キーアップに、他のコードが実行しただけの場合はそのコードを実行しないように指示することです。

2
Rhyono

Documentの読み取り専用プロパティは、このドキュメントで現在全画面モードで表示されているElementを返します。全画面モードが現在使用されていない場合はnullを返します。

if(document.fullscreenElement){
  console.log("Fullscreen");
}else{
  console.log("Not Fullscreen");
};

すべての主要ブラウザでサポートされています。

2
Sarif Mia

IOS上のSafariの場合、以下を使用できます。

if (window.navigator.standalone) {
  alert("Full Screen");
}

詳細： https://developer.Apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html

2
Zuinglio Lopes Ribeiro Júnior

これはすべての新しいブラウザで機能します。

if (!window.screenTop && !window.screenY) { 
   alert('Browser is in fullscreen');
}
1
Tom Ulatowski

これが私の解決策です...私はそれをes6モジュールとして書きましたが、コードはかなり単純なはずです。

/**
 * Created by sam on 9/9/16.
 */
import $ from "jquery"

function isFullScreenWebkit(){
    return $("*:-webkit-full-screen").length > 0;
}
function isFullScreenMozilla(){
    return $("*:-moz-full-screen").length > 0;
}
function isFullScreenMicrosoft(){
    return $("*:-ms-fullscreen").length > 0;
}

function isFullScreen(){
    // Fastist way
    var result =
        document.fullscreenElement ||
        document.mozFullScreenElement ||
        document.webkitFullscreenElement ||
        document.msFullscreenElement;

    if(result) return true;

    // A fallback
    try{
        return isFullScreenMicrosoft();
    }catch(ex){}
    try{
        return isFullScreenMozilla();
    }catch(ex){}
    try{
        return isFullScreenWebkit();
    }catch(ex){}

    console.log("This browser is not supported, sorry!");
    return false;
}

window.isFullScreen = isFullScreen;

export default isFullScreen;
1
sam_g_steel

私のNOTクロスブラウザバリアントがあります：

<!DOCTYPE html>
<html>
<head>
  <title>Fullscreen</title>
</head>
<body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
var fullscreen = $(window).height() + 1 >= screen.height;
$(window).on('resize', function() {
  if (!fullscreen) {
    setTimeout(function(heightStamp) {
      if (!fullscreen && $(window).height() === heightStamp && heightStamp + 1 >= screen.height) {
        fullscreen = true;
        $('body').prepend( "<div>" + $( window ).height() + " | " + screen.height + " | fullscreen ON</div>" );
      }
    }, 500, $(window).height());
  } else {
    setTimeout(function(heightStamp) {
      if (fullscreen && $(window).height() === heightStamp && heightStamp + 1 < screen.height) {
        fullscreen = false;
        $('body').prepend( "<div>" + $( window ).height() + " | " + screen.height + " | fullscreen OFF</div>" );
      }
    }, 500, $(window).height());
  }
});
</script>
</body>
</html>

テスト済み：
Kubuntu 13.1：
Firefox 27（<!DOCTYPE html>が必要です。スクリプトはデュアルモニターで正しく機能します）、Chrome 33、Rekonq-pass

Win 7：
Firefox 27、Chrome 33、Opera 12、Opera 20、IE 10-パス
IE <10-失敗

1
SergO

私の解決策は：

var fullscreenCount = 0;
var changeHandler = function() {                                           

    fullscreenCount ++;

    if(fullscreenCount % 2 === 0)
    {
        console.log('fullscreen exit');
    }
    else
    {
        console.log('fullscreened');
    }

}                                                                         
document.addEventListener("fullscreenchange", changeHandler, false);      
document.addEventListener("webkitfullscreenchange", changeHandler, false);
document.addEventListener("mozfullscreenchange", changeHandler, false);
document.addEventListener("MSFullscreenChanges", changeHandler, false);
1
w4kskl

唯一のフォローは私のために働きました

function isFullScreen(){
  return window.innerHeight == screen.height;
}
console.log(isFullScreen());
0
Hari Das

ハイとローを検索していると、半分の解しか見つかりませんでした。したがって、この問題に対する最新の実用的なアプローチをここに投稿することをお勧めします。

var isAtMaxWidth = (screen.availWidth - window.innerWidth) === 0;
var isAtMaxHeight = (screen.availHeight - window.outerHeight <= 1);
if (!isAtMaxWidth || !isAtMaxHeight) {
       alert("Browser NOT maximized!");
}

2019年11月10日の時点で、Chrome、Firefox、Edge、Opera *（*サイドバーの固定を解除した状態）でテストおよび正常に動作しています。テスト環境（デスクトップのみ）：

CHROME - Ver. 78.0.3904.97 (64-bit)
FIREFOX - Ver. 70.0.1 (64-bit)
Edge - Ver. 44.18362.449.0 (64-bit)
OPERA - Ver. 64.0.3417.92 (64-bit)
OS - WIN10 build 18362.449 (64-bit)

リソース：

0
Ivan

ユーザーwindow.innerHeightおよびscreen.availHeight。幅も。

window.onresize = function(event) {
    if (window.outerWidth === screen.availWidth && window.outerHeight === screen.availHeight) {
        console.log("This is your MOMENT of fullscreen: " + Date());    
}
0
Charlie