Como Fazer um Div em Tela Cheia: Soluções em CSS e JavaScript
Resposta Rápida
Para fazer um div preencher toda a tela, você precisará de um pequeno ajuste no CSS. Use a propriedade position: fixed;, que permitirá que o elemento ocupe toda a tela, e defina as coordenadas de cada borda como 0. Para garantir que seu elemento se destaque, aumente o z-index: 100;. Aqui está um exemplo da sintaxe para esse estilo:
.fullscreen {
position: fixed;
top: 0; right: 0; bottom: 0; left: 0;
z-index: 100;
}Atribua a classe fullscreen ao seu div da seguinte forma:
<div class="fullscreen"></div>Esse método não envolve o uso da API de Tela Cheia, mas pode ser suficiente para criar uma interface de usuário impressionante.
Dicas e Truques Profissionais para Modo Tela Cheia
Quer fazer do seu div o centro das atenções da tela? A API de Tela Cheia do HTML5 pode aprimorar significativamente as capacidades do seu elemento.
Use a API de Tela Cheia
Esse código permite que você abra o mundo da exibição em tela cheia—basta clicar no botão e um novo reino de possibilidades se abrirá para você.
// Função para alternar entre o modo tela cheia e o modo normal.
function toggleFullScreen(elem) {
if (!document.fullscreenElement) {
if (elem.requestFullscreen) {
elem.requestFullscreen();
}
} else {
if (document.exitFullscreen) {
document.exitFullscreen();
}
}
}
// Ative a função no clique do botão
document.getElementById('myButton').addEventListener('click', function() {
toggleFullScreen(document.getElementById('myDiv'));
});Design Responsivo
Certifique-se de que seu div seja exibido corretamente em várias telas de dispositivos. Consultas de mídia CSS e JavaScript podem ajudar a adaptar seu elemento a tamanhos de tela de navegador em mudança.
Compatibilidade entre Navegadores
Não esqueça de verificar a compatibilidade entre diferentes navegadores. A API de Tela Cheia funcionará melhor ao ser usada com HTTPS, e fique atento a peculiaridades em dispositivos com Android 4.3 e versões anteriores.
Estilização
Quando seu div ocupar toda a tela, sua aparência deve ser impecável. Você pode aplicar vários estilos ao elemento, como border, border-radius e padding, para torná-lo visualmente atraente e polido.
Visualização
Aqui está um exemplo de transição de um esboço simples para uma imagem em tela cheia:
.fullscreen-div {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
}Um Div em Tela Cheia transforma seu elemento em um grande espetáculo, ocupando todo o espaço da tela.
Aprofundando: Do Conceito à Implementação
O Cavaleiro de Armadura Brilhante
Faça do seu div o mestre de todo o espaço dentro da tag <body>. Se o seu div não for um filho direto de <body>, use position: absolute para posicionar o elemento.
.fullscreen-div {
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
width: 100%; height: 100%;
z-index: 9999;
}Flexibilidade e Interatividade
Seu div deve ser flexível o suficiente para redimensionar e se adaptar ao seu contêiner pai ao alternar entre os modos normal e tela cheia. JavaScript pode ajudá-lo aqui.
Estilização para o Palco Principal
No modo de tela cheia, seu div deve parecer o mais expressivo possível. Use o seletor :fullscreen para personalizar estilos e não esqueça a importância de margens e bordas.
Saindo do Modo Tela Cheia
Um jeito conveniente de sair do modo tela cheia deve ser fornecido, geralmente conseguido ao pressionar a tecla "Esc". Lembre-se, o poder está nas mãos do usuário!
Recursos Úteis
- API de Tela Cheia - Web API | MDN — Instruções e documentação para uso da API de Tela Cheia.
- Como Criar um Menu de Navegação em Sobreposição de Tela Cheia — Guia para criar um menu de navegação em sobreposição de tela cheia.
- html - Fazer body 100% da altura do navegador - Stack Overflow — Discussões e soluções para adaptar o espaço da tela.
- Criando Experiências em Tela Cheia | Artigos | web.dev — Recomendações para desenvolver interfaces em tela cheia.
- GitHub - sindresorhus/screenfull: Wrapper simples para uso da API de Tela Cheia do JavaScript entre navegadores — Uma biblioteca útil para trabalhar com a API de Tela Cheia em vários navegadores.
- javascript - clique para ir para a tela cheia - Stack Overflow — Discussões sobre diferentes métodos para ativar o modo tela cheia.