La plupart des navigateurs peuvent actuellement passer en mode plein écran ou Kiosque pendant un certain temps. En fait, l'interface utilisateur Chrome du navigateur s'efface et le contenu prend le relais. Les utilisateurs pouvaient même configurer manuellement les applications installées à partir du Chrome Web Store afin qu'elles s'exécutent en plein écran lorsqu'elles sont ouvertes depuis la page "Nouvel onglet". Le mode plein écran manuel est une bonne option. Le plein écran programmatique est plus efficace.
L'API plein écran permet aux applications Web d'indiquer par programmation à tout contenu de la page qu'il doit passer en mode d'affichage plein écran du navigateur, à partir de JavaScript. Ainsi, les jeux WebGL et <canvas> peuvent enfin devenir totalement immersifs, les vidéos comme sur grand écran et les magazines en ligne comme la vraie affaire. J'adore le navigateur, mais il ne devrait pas nous en empêcher :)
Si vous ne le souhaitez pas, voici une démonstration:
Comment fonctionne l'API ? Par exemple, si vous souhaitez qu'une <div> s'affiche en plein écran, il vous suffit de lui demander de:
div.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
div.mozRequestFullScreen();
div.msRequestFullscreen();
div.requestFullscreen(); // standard
Ensuite, pour quitter le mode plein écran, document expose une méthode pour cela:
document.webkitExitFullscreen();
document.mozCancelFullScreen();
document.msExitFullscreen();
document.exitFullscreen();
Le contenu en mode plein écran est centré dans la fenêtre d'affichage du navigateur. C'est au développeur de définir le style de ce contenu de la manière la plus appropriée pour l'affichage. En règle générale, votre <div> doit occuper tout l'espace de l'écran. La bonne nouvelle, c'est que l'API inclut de nouveaux pseudo-sélecteurs CSS pour:
div:-webkit-full-screen {
width: 100% !important;
}
div:-moz-full-screen {
width: 100% !important;
}
div:-ms-fullscreen {
width: 100% !important;
}
div:fullscreen {
width: 100% !important;
}
/* While in fullscreen, hide any children with class 'tohide' */
:-webkit-full-screen .tohide {
display: none;
}
:-moz-full-screen .tohide {
display: none;
}
:-ms-fullscreen .tohide {
display: none;
}
:fullscreen .tohide {
display: none;
}
Grâce aux pseudo-sélecteurs CSS, vous pouvez très facilement styliser le contenu plein écran comme vous le souhaitez.
L'API Fullscreen est activée par défaut dans Chrome 15, FF 14, IE 11 et Opera 12.1. Pour en savoir plus sur le reste de l'API, consultez les spécifications.
Mise à jour du 11/10/2012: afin de se conformer aux modifications des spécifications. Le "S" a été mis en minuscules dans requestFullscreen() et remplacé par document.webkitCancelFullScreen() par document.webkitExitFullscreen(). Mise à jour du commentaire sur la compatibilité du navigateur.
Mise à jour du 11/02/2014: ajout des préfixes pour IE, ajout de la syntaxe CSS standard et mise à jour des commentaires sur la compatibilité des navigateurs. Merci à @dstorey et à @patrickkettner.