Há algum tempo, a maioria dos navegadores tem a capacidade de entrar no modo de tela cheia ou quiosque. Basicamente, a interface do Chrome do navegador sai do caminho e o conteúdo assume o controle. Para apps instalados na Chrome Web Store, os usuários podem até configurar manualmente um app para ser executado em tela cheia quando for aberto na página "Nova guia". A tela cheia manual é boa. A tela cheia programática é melhor.
A API Fullscreen permite que os apps da Web informem de maneira programática qualquer conteúdo na página para entrar no modo de visualização em tela cheia do navegador usando JavaScript. Isso significa que os jogos WebGL e <canvas> podem finalmente se tornar totalmente imersivos, os vídeos podem parecer a tela de cinema e as revistas on-line podem parecer reais. Eu adoro o navegador, mas não podemos ser limitados por ele :)
Se você quiser pular os detalhes, confira uma demonstração:
Como a API funciona? Se você quiser que um <div>, por exemplo, apareça em tela cheia, basta dizer a ele:
div.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
div.mozRequestFullScreen();
div.msRequestFullscreen();
div.requestFullscreen(); // standard
Para sair do modo de tela cheia, o document expõe um método para isso:
document.webkitExitFullscreen();
document.mozCancelFullScreen();
document.msExitFullscreen();
document.exitFullscreen();
O conteúdo no modo tela cheia é centralizado na janela de visualização do navegador. Cabe ao desenvolvedor estilizar esse conteúdo da maneira mais adequada para visualização. Normalmente, você vai querer que a <div> ocupe todo o espaço da tela. A boa notícia é que a API inclui novos pseudoseletores 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 pseudo-seletores CSS facilitam muito o estilo do conteúdo em tela cheia da maneira que você quiser.
A API Fullscreen é ativada por padrão no Chrome 15, FF 14, IE 11 e Opera 12.1. Para mais informações sobre o restante da API, consulte a especificação.
Atualizado em 11/10/2012: para estar em conformidade com as mudanças nas especificações. A letra "S" em requestFullscreen() foi convertida em letras minúsculas e document.webkitCancelFullScreen() foi alterada para document.webkitExitFullscreen(). Atualizamos o comentário sobre a compatibilidade com navegadores.
Atualizado em 11-02-2014: para incluir prefixos para IE, adicionar a sintaxe CSS padrão e atualizar o comentário de compatibilidade do navegador. Agradecemos a @dstorey e @patrickkettner.