Código

Como usar a API de tela inteira

Juntamente com o HTML5 veio um grande número de funcionalidades da API e uma das melhores foi a API Fullscreen que fornece uma maneira nativa para o navegador fazer o que só era possível em flash por um longo tempo: exibir a página no modo de tela cheia para o usuário.

Isso será útil se você estiver exibindo vídeo ou imagens, ou se estiver desenvolvendo um jogo. Na verdade, qualquer conteúdo que precise ser focado pode se beneficiar da API de tela cheia.

E o melhor de tudo é que a API Fullscreen é muito fácil de usar…

Os métodos

Vários métodos fazem parte da API de tela inteira: 

element.requestFullScreen()

Esse método permite que um único elemento seja exibido em tela cheia. 

Document.getElementById(“myCanvas”).requestFullScreen()

Isso fará com que a tela com o ID 'myCanvas' fique em tela cheia. 

document.cancelFullScreen()

Isso simplesmente sai do modo de tela cheia e retorna à exibição do documento. 

Document.fullScreen

Isso retornará verdadeiro se o usuário estiver no modo de tela inteira. 

document.fullScreenElement

Retorna o elemento que está atualmente no modo de tela inteira.

Observe que esses são os métodos padrão, mas, por enquanto, você precisará de prefixos de fornecedores para que isso funcione no Chrome, Firefox e Safari (o Internet Explorer e o Opera não suportam essa API no momento).

Iniciando o modo de tela cheia

Como primeiro precisamos descobrir qual método o navegador reconhece, criaremos uma função que encontrará o método correto para o navegador e a chamará: 

//helper functionfunction fullScreen(element) {if(element.requestFullScreen) {element.requestFullScreen();} else if(element.webkitRequestFullScreen ) {element.webkitRequestFullScreen();} else if(element.mozRequestFullScreen) {element.mozRequestFullScreen();}}

Como você pode ver, toda essa função faz ver se algum dos métodos requestFullScreen retorna true e, em seguida, chama a função para o navegador correto usando seu prefixo de fornecedor.

Depois disso, tudo o que precisamos fazer é chamar a função fullScreen assim: 

//for the whole pagevar html = document.documentElement;fullScreen(html);
 // For a specific element on the pagevar canvas = document.getElementById('mycanvas');fullScreen(canvas);

Isto irá enviar um aviso para o usuário solicitando permissão para ir em tela cheia, se for aceito, todas as barras de ferramentas no navegador desaparecerão e a única coisa na tela será a página desejada ou o único elemento.

Cancelando o modo de tela cheia

Esse método também requer prefixos de fornecedores, portanto, usaremos a mesma ideia acima e criaremos uma função que determinará qual prefixo devemos usar de acordo com o navegador do usuário.

Uma coisa que você notará é que esse método não precisa passar por nenhum elemento porque, diferentemente do método requestFullScreen, ele sempre se aplica ao documento inteiro. 

// the helper functionfunction fullScreenCancel() {if(document.requestFullScreen) {document.requestFullScreen();} else if(document .webkitRequestFullScreen ) {document.webkitRequestFullScreen();} else if(document .mozRequestFullScreen) {document.mozRequestFullScreen();}}//cancel full-screenfullScreenCancel();

A pseudoclasse do CSS

Juntamente com esta API JavaScript veio uma pseudo-classe CSS chamada: full-screen e isso pode ser usado para estilizar quaisquer elementos na página da web quando está no modo de tela cheia, isso pode ser útil porque o tamanho do navegador aumenta um pouco quando modo tela cheia. 

/* Changing something in the body */:-webkit-full-screen {font-size: 16px;}:-moz-full-screen {font-size: 16px;}
/*Only one element*/:-webkit-full-screen img {width: 100%;height: 100%;}:-moz-full-screen img {width: 100%;height: 100%;}

Esteja ciente de que você não pode separar os prefixos do fornecedor com vírgulas porque o navegador não os lerá: 

/* This will not work */:-webkit-full-screen img,:-moz-full-screen img {width: 100%;height: 100%;}

Para que os estilos sejam aplicados corretamente, você deve colocar cada prefixo de fornecedor em seu próprio bloco.

Conclusão

Essa API JavaScript é uma das menos conhecidas que acompanham o HTML5, mas, na minha opinião, é eficiente e simples de implementar. A experiência do usuário aprimorada de focar em um único elemento, especialmente para vídeo, imagens e jogos, vale bem as poucas linhas de código envolvidas.

Você implementou a API de tela cheia em qualquer lugar? O que você pode pensar para isso? Deixe-nos saber nos comentários.

Imagem em destaque / miniatura, imagem de foco via Shutterstock.

css: tela cheia api fullscreen imagens em tela cheia vídeo em tela cheia páginas da web em tela cheia vai em tela cheia javascript fullscreen