web-dev-qa-db-ja.com

フルスクリーンモードを検出する

IE 10の最新のデスクトップバージョンは常にフルスクリーンです。

W3の:fullscreen疑似クラスには リビング仕様 があります

しかし、jQueryバージョン1.9.xおよび2.xでフルスクリーンを検出しようとしたとき：

$(document).is(":fullscreen")

このエラーがスローされました：

構文エラー、認識できない式：フルスクリーン

質問：

  1. JQueryがこの標準またはIE10をまだ認識していないためでしょうか？

  2. 全画面モードを確認するlegacy方法は何ですか？私は次の結果を期待しています：

    function IsFullScreen() {
     /* Retrun TRUE */
     /* If UA exists in classic desktop and not in full screen  */
     /* Else return FALSE */
}

  3. ブラウザのスニッフィングなしで実行できますか？

javascriptjquerycssinternet-explorercss3
45
Annie

あなたが発見したように、ブラウザの互換性は大きな欠点です。結局のところ、これは非常に新しいものです。

ただし、JavaScriptで作業しているため、CSSを使用している場合よりもはるかに多くのオプションを使用できます。

例えば：

if( window.innerHeight == screen.height) {
    // browser is fullscreen
}

また、若干緩やかな比較を確認することもできます。

if( (screen.availHeight || screen.height-30) <= window.innerHeight) {
    // browser is almost certainly fullscreen
}
57
Niet the Dark Absol

ブラウザが全画面モードを変更すると、イベントが発生します。これを使用して変数値を設定し、ブラウザが全画面表示かどうかを確認できます。

this.fullScreenMode = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen; // This will return true or false depending on if it's full screen or not.

$(document).on ('mozfullscreenchange webkitfullscreenchange fullscreenchange',function(){
       this.fullScreenMode = !this.fullScreenMode;

      //-Check for full screen mode and do something..
      simulateFullScreen();
 });





var simulateFullScreen = function() {
     if(this.fullScreenMode) {
            docElm = document.documentElement
            if (docElm.requestFullscreen) 
                docElm.requestFullscreen()
            else{
                if (docElm.mozRequestFullScreen) 
                   docElm.mozRequestFullScreen()
                else{
                   if (docElm.webkitRequestFullScreen)
                     docElm.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT)
                }
            }
     }else{
             if (document.exitFullscreen) 
                  document.exitFullscreen()
             else{ 
                  if (document.mozCancelFullScreen) 
                     document.mozCancelFullScreen()
                  else{
                     if (document.webkitCancelFullScreen) 
                         document.webkitCancelFullScreen();
                  }
             }
     }

     this.fullScreenMode= !this.fullScreenMode

}
12
anurag_29

これはIE9 +およびその他の最新のブラウザーで動作します

function isFullscreen(){ return 1 >= outerHeight - innerHeight };

「0」の代わりに「1」を使用すると、システムがマウスインタラクションの一部の非表示またはスライドコマンドバーの高さを1ピクセルだけ予約することがあります。その場合、フルスクリーン検出は失敗します。

  • また、work任意の個別のdocument-elementは、いつでも全画面モードになります。
7
Bekim Bacaj

fullscreenchangeイベントを使用して、フルスクリーン変更イベントを検出するか、ベンダープレフィックスを処理したくない場合は、resizeイベント（フルスクリーン時にトリガーするウィンドウサイズ変更イベントもリッスンできます）が開始または終了します）、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");              
          }
      });
4
Parth

それはIE 8で動作しており、IE 8.の特定のWebページを書いています。 。

function isFullScreen(){
    return window.screenTop == 0 ? true : false;
}
3
Günay Gültekin

これを試して！最近のブラウザで動作します。

if (!window.screenTop && !window.screenY) {
    alert('Fullscreen mode......');
}

this jqueryプラグインを使用することもできます。

$(window).bind("fullscreen-on", function(e) {
alert("FULLSCREEN MODE");
});
1
Ifeanyi Chukwu

$（document）の代わりに$（window）を試しましたか。 1つの例に従ってください http://webification.com/tag/detect-fullscreen-jquery 。

0
Gustavo Alves

IPhoneのSafariでは、webkitDisplayingFullscreenプロパティはtrue if if <video>はフルスクリーンで再生されています。参照： https://developer.Apple.com/documentation/webkitjs/htmlvideoelement/1630493-webkitdisplayingfullscreen

0
ColCh

あなたのために働くかもしれない別のソリューションは次のとおりです。

function isFullScreen() {
return Math.abs(screen.width - window.innerWidth) < 10; 
}

下部のタブと開発者情報を回避するのに役立つので、幅を使用することを好みます。

0
Joshua Olson

IE 11：

$(document).bind('webkitfullscreenchange mozfullscreenchange fullscreenchange MSFullscreenChange', function() {
var isFullScreen = document.fullScreen ||
    document.mozFullScreen ||
    document.webkitIsFullScreen || (document.msFullscreenElement != null);
if (isFullScreen) {
    console.log('fullScreen!');
} else {
    console.log('no fullScreen!');
}

}）;

0
Petryk
var isFullScreen = function()
{
    var dom = document.createElement("img");
    if ("requestFullscreen" in dom
        || "requestFullScreen" in dom
        || "webkitRequestFullScreen" in dom
        || "mozRequestFullScreen" in dom){
        return !0;
    }
    return !1;
}
0
xicooc

Modernizr FTW ？この要点を試してみてください。

0
Ahmad Alfy

私はこれを行うための良い方法を考え出した：

w = $('body').width();

if (w == '4800' || w == '4320' || w == '4096' || w == '3200' || w == '3072' || w == '2880' || w == '2560' || w == '2400' || w == '2160' || w == '2048' || w == '1920' || w == '1800' || w == '1620' || w == '1600' || w == '1536' || w == '1440' || w == '1280' || w == '1200' || w == '1152' || w == '1080' || w == '1050' || w == '1024' || w == '960' || w == '900' || w == '864' || w == '800' || w == '768' || w == '720') {
      //User is fullscreen
}

次に、本体のデフォルト幅を次のように設定します。

body { width: calc(100% - 1px) }
0
Jack Nicholson