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.
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.
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.
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.
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.
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
.
Pour Safari sur iOS pouvez utiliser:
if (window.navigator.standalone) {
alert("Full Screen");
}
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.
cela fonctionne pour tous les nouveaux navigateurs:
if (!window.screenTop && !window.screenY) {
alert('Browser is in fullscreen');
}
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
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");
}
});
, 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
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);
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;
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());
}