Détection si un navigateur est en mode plein écran

Existe-t-il un moyen fiable de détecter si un navigateur fonctionne en mode plein écran? Je suis presque sûr qu'il n'y a pas d'API de navigateur que je puisse interroger, mais quelqu'un a-t-il trouvé une solution en inspectant et en comparant certaines mesures de hauteur/largeur exposées par le DOM? Même si cela ne fonctionne que pour certains navigateurs, je suis intéressé à entendre parler de lui.

40
demandé sur Simon Lieschke 2009-06-26 08:22:40

14 réponses

Chrome 15, Firefox 10, et Safari 5.1 fournissent maintenant des API pour déclencher programmatiquement le mode plein écran. Le mode fullscreen déclenché de cette façon fournit des événements pour détecter les changements de fullscreen et les pseudo-classes CSS pour la conception des éléments fullscreen.

voir ce hacks.mozilla.org pour plus de détails.

15
répondu Simon Lieschke 2018-04-20 21:06:33

Opera traite le plein écran comme un type de média CSS différent. Ils l'appellent spectacle D'Opéra , et vous pouvez le contrôler vous-même facilement:

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

combiné avec Opera@USB , Je l'ai personnellement trouvé extrêmement pratique.

9
répondu 2009-06-26 04:46:45

Qu'en est-il de la détermination de la distance entre la largeur de champ de vision et la largeur de résolution et de même pour la hauteur. Si c'est une petite quantité de pixels (surtout pour la hauteur) il peut être à plein écran.

cependant, cela ne sera jamais fiable.

7
répondu alex 2009-06-26 04:28:01

j'ai juste pensé que je pourrais ajouter ma pence pour sauver quiconque se cogner la tête. La première réponse est excellente si vous avez le contrôle complet du processus, c'est-à-dire que vous initiez le processus plein écran en code. Inutile si quelqu'un le fait en frappant F11.

la lueur d'espoir à l'horizon prend la forme de cette recommandation du W3C http://www.w3.org/TR/view-mode / qui va permettre la détection de fenêtrée, flottante (sans chrome), maximisé, minimisé et plein écran via les requêtes médias (ce qui signifie Bien sûr fenêtre.matchMedia et associés).

j'ai vu des signes qu'il est dans le processus de mise en œuvre avec les préfixes-webkit et-moz mais il ne semble pas être encore en production.

donc non, pas de solutions mais j'espère que je vais sauver quelqu'un faisant beaucoup de course autour avant de frapper le même mur.

PS *:-moz-plein écran n'est doo-dah, mais agréable à savoir sur.

5
répondu Paul Duffy 2015-01-28 03:42:43

Firefox 3 + fournit une propriété non standard sur l'objet window qui indique si le navigateur est en mode plein écran ou non: window.fullScreen .

4
répondu Simon Lieschke 2012-02-02 13:35:54
3
répondu Zuinglio Lopes Ribeiro Júnior 2012-03-20 17:13:33

en Chrome au moins:

onkeydown peut être utilisé pour détecter la touche F11 pressée pour entrer en plein écran. onkeyup peut être utilisé pour détecter la touche F11 pressée pour sortir du plein écran.

utiliser que conjointement avec le contrôle pour keyCode == 122

la partie délicate serait de dire au keydown/keyup de ne pas exécuter son code si l'autre vient de le faire.

3
répondu Rhyono 2012-08-21 07:14:50

cela fonctionne pour tous les nouveaux navigateurs:

if (!window.screenTop && !window.screenY) { 
   alert('Browser is in fullscreen');
}
2
répondu Tom Ulatowski 2011-10-22 03:34:04

D'accord. Totalement en retard sur celui-ci...

à partir du 25 novembre 2014 (Heure de la rédaction), il est possible pour les éléments de demander l'accès Plein-écran, et par la suite contrôler entrée/sortie du mode plein-écran.

MDN explication ici: https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode

Straight explanation by David Walsh: http://davidwalsh.name/fullscreen

2
répondu Abhishek 2014-11-25 12:42:09

vous pouvez vérifier si document.fullscreenElement n'est pas nul pour déterminer si le mode plein écran est activé. Vous aurez besoin de vendeur préfixe fullscreenElement en conséquence. Je voudrais utiliser quelque chose comme ceci:

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 pour ce que je cite ci-dessous:

document.addEventListener("fullscreenChange", function () {
          if (fullscreenElement != null) {
              console.info("Went full screen");
          } else {
              console.info("Exited full screen");              
          }
      });
2
répondu Parth 2016-02-03 13:30:58

, Il y a PAS de croix-navigateur variante:

<!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>

testé le:

Kubuntu 13.10 :

Firefox 27 ( <!DOCTYPE html> est requis, le script fonctionne correctement avec les moniteurs doubles), Chrome 33, rekonq-pass

Gagner 7 :

Firefox 27, Chrome 33, Opera 12, Opera 20, IE 10-pass

IE < 10-échec

1
répondu SergO 2014-03-07 19:35:52

ma solution est:

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
répondu w4kskl 2015-06-24 15:19:00

C'est la solution que j'ai trouvée... Je l'ai écrit comme un module es6 mais le code devrait être assez simple.

/**
 * 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
répondu sam_g_steel 2016-09-10 18:37:18

Utilisateur window.innerHeight et screen.availHeight . Aussi les largeurs.

window.onresize = function(event) {
    if (window.outerWidth === screen.availWidth && window.outerHeight === screen.availHeight) {
        console.log("This is your MOMENT of fullscreen: " + Date());    
}
0
répondu Charlie H 2015-12-03 15:13:33