A maioria dos navegadores consegue entrar em um modo de tela cheia ou quiosque por algum tempo. Basicamente, a interface do Chrome do navegador sai do caminho e o conteúdo assume o controle. Para apps instalados da Chrome Web Store, os usuários podem até configurar manualmente um app para ser executado em tela cheia quando ele for aberto na página "Nova guia". O modo de tela cheia manual é bom. A tela cheia programática é melhor!
A API Fullscreen permite que os apps da Web façam com que qualquer conteúdo da página entre no modo de visualização em tela cheia do navegador JavaScript, de modo programático. Isso significa que os jogos WebGL e <canvas> podem finalmente se tornar totalmente imersivos, os vídeos podem parecer uma tela de prata e as revistas on-line podem parecer uma verdadeira oferta. Eu amo o navegador, mas ele não deve nos limitar :)
Para pular os detalhes, veja uma demonstração:
Então, como a API funciona? Se você quiser que um <div>, por exemplo, entre em tela cheia, basta dizer para:
div.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
div.mozRequestFullScreen();
div.msRequestFullscreen();
div.requestFullscreen(); // standard
Em seguida, para sair da tela cheia, o document expõe um método para isso:
document.webkitExitFullscreen();
document.mozCancelFullScreen();
document.msExitFullscreen();
document.exitFullscreen();
O conteúdo no modo de tela cheia é centralizado na janela de visualização dos navegadores. Cabe ao desenvolvedor estilizar esse conteúdo da maneira mais apropriada para visualização. Normalmente, o <div> ocupe toda a área da tela. A boa notícia é que a API inclui novos pseudosseletores CSS para isso:
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;
}
Os pseudosseletores do CSS facilitam o estilo do conteúdo em tela cheia do jeito que você quiser.
A API Fullscreen está ativada por padrão no Chrome 15, FF 14, IE 11 e Opera 12.1. Para saber mais sobre o restante da API, consulte as especificações.
Atualizado em 11/10/2012: para alinhamento com as alterações de especificações. "S" em letra minúscula em requestFullscreen() e mudança de document.webkitCancelFullScreen() para document.webkitExitFullscreen(). O comentário de compatibilidade do navegador foi atualizado.
Atualizado em 11/02/2014: para incluir prefixos para o IE, adicione a sintaxe CSS padrão e atualize o comentário de compatibilidade do navegador. Agradecemos a @dstorey e @patrickkettner.