Método requestFullscreen() da API Fullscreen

Definição e uso

requestFullscreen() Método para abrir elemento em modo de tela cheia.

Dica:Use Método exitFullscreen()Sair do modo de tela cheia.

Exemplo

Exemplo 1

Exibe o elemento <video> em modo de tela cheia:

/* Obtém o elemento a ser exibido em modo de tela cheia (no exemplo, o vídeo): */
var elem = document.getElementById("myvideo");
/* Ao executar a função openFullscreen(), abre o vídeo em tela cheia. */
Atenção, devemos incluir os prefixos de diferentes navegadores, pois eles ainda não suportam a propriedade requestFullscreen */
function openFullscreen() {
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.webkitRequestFullscreen) { /* Safari */
    elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { /* IE11 */
    elem.msRequestFullscreen();
  }
}

Experimente você mesmo

Exemplo 2

Para abrir a página HTML em tela cheia, use document.documentElement em vez de document.getElementById("element").Neste exemplo, também usamos uma função de fechamento para sair de tela cheia:

/* Obter documentElement (<html>) para exibir a página em tela cheia */
var elem = document.documentElement;
/* Visualização em tela cheia */
function openFullscreen() {
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.webkitRequestFullscreen) { /* Safari */
    elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { /* IE11 */
    elem.msRequestFullscreen();
  }
}
/* Fechar tela cheia */
function closeFullscreen() {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.webkitExitFullscreen) { /* Safari */
    document.webkitExitFullscreen();
  } else if (document.msExitFullscreen) { /* IE11 */
    document.msExitFullscreen();
  }
}

Experimente você mesmo

Exemplo 3

Quando a página estiver em modo de tela cheia, você também pode usar CSS para definir o estilo da página:

/* Safari */
:-webkit-full-screen {
  background-color: yellow;
}
/* Sintaxe do IE11 */
:-ms-fullscreen {
  background-color: yellow;
}
/* Sintaxe padrão */
:fullscreen {
  background-color: yellow;
}

Experimente você mesmo

Sintaxe

HTMLElementObject.requestFullscreen()

Parâmetros

Nenhum.

Detalhes técnicos

Valor retornado: Nenhum valor retornado.

Suporte do navegador

Os números na tabela indicam a primeira versão do navegador que suporta plenamente este método.

Notas:Alguns navegadores precisam de prefixos específicos (veja os parênteses):

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
71.0
15.0 (webkit)		 79.0
11.0 (ms)		 64.0
9.0 (moz)		 6.0 (webkit) 58.0
15.0 (webkit)