web-dev-qa-db-fra.com

Détecter le mode plein écran

La version de bureau moderne de IE 10 est toujours en plein écran.

Il existe une spécification living pour :fullscreen pseudo-class sur W3

Mais quand j'ai essayé de détecter le plein écran avec jQuery version 1.9.x et 2.x:

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

il a jeté cette erreur:

Erreur de syntaxe, expression non reconnue: plein écran

Des questions:

  1. Est-ce parce que jQuery ne reconnaît pas encore cette norme ou IE10?

  2. Quel est le moyen legacy de vérifier le mode plein écran? J'attends les résultats suivants:

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

  3. Peut-on le faire sans sniffer le navigateur?

javascriptjquerycssinternet-explorercss3
44
Annie

Comme vous l'avez découvert, la compatibilité du navigateur est un gros inconvénient. Après tout, c'est quelque chose de très nouveau.

Cependant, puisque vous travaillez en JavaScript, vous avez beaucoup plus d'options à votre disposition que si vous utilisiez simplement CSS.

Par exemple:

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

Vous pouvez également vérifier certaines comparaisons un peu plus lâches:

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

un événement est déclenché lorsque le navigateur passe en mode plein écran. Vous pouvez l'utiliser pour définir une valeur de variable que vous pouvez vérifier pour déterminer si le navigateur est en plein écran ou non.

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

Cela fonctionnera sur IE9 + et d'autres navigateurs modernes

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

L'utilisation de "1" (au lieu de zéro) car le système peut parfois réserver une hauteur d'un pixel pour l'interaction de la souris avec certaines barres de commande cachées ou coulissantes, auquel cas la détection en plein écran échouerait. 

  • sera également work pour tout document-élément séparé passant en mode plein écran à tout moment.
6
Bekim Bacaj

Utilisez l'événement fullscreenchange pour détecter un événement de modification en plein écran ou si vous ne souhaitez pas gérer les préfixes de fournisseur, vous pouvez également écouter l'événement resize (l'événement de redimensionnement de la fenêtre qui se déclenche également lorsque le mode plein écran est entré ou quitté), puis vérifiez si document.fullscreenElement n'est pas nul pour déterminer si le mode plein écran est activé. Vous aurez besoin du préfixe du vendeur fullscreenElement en conséquence. Je voudrais utiliser quelque chose comme ça:

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

https://msdn.Microsoft.com/en-us/library/dn312066(v=vs.85).aspx a un bon exemple de ce que je cite ci-dessous:

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

Il fonctionne dans IE 8 et j'écris une page Web spécifique pour IE 8. Je n'ai pas besoin de vérifier si les autres navigateurs le prennent en charge ou non.

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

Essaye ça! Fonctionne pour les navigateurs récents.

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

Vous pouvez également utiliser this jquery plugin pour la même chose.

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

Avez-vous essayé $ (fenêtre) au lieu de $ (document). Suivez un exemple http://webification.com/tag/detect-fullscreen-jquery .

0
Gustavo Alves

Dans Safari sur iPhone, la propriété webkitDisplayingFullscreen renverra true si <video> est en cours de lecture en plein écran. Réf.: https://developer.Apple.com/documentation/webkitjs/htmlvideoelement/1630493-webkitdisplayingfullscreen

0
ColCh

Voici une autre solution qui pourrait fonctionner pour vous:

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

Je préfère utiliser la largeur car cela aidera à contourner les onglets et les informations relatives aux développeurs en bas.

0
Joshua Olson

Voici une autre solution qui fonctionne dans 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 ? Essayez ce Gist.

0
Ahmad Alfy

J'ai trouvé un bon moyen de le faire:

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
}

Définissez ensuite la largeur par défaut du corps sur:

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