Procurei um pouco sobre o mesmo no google e a maioria as pessoas falam para usar
position: absolute;
z-index:9999;
width:100%;
height:100%;
top:0;
left:0;
Porém o código acima só funciona para por em fullscreen dentro da janela, e não é isso que quero, eu quero usar Fullscreen de verdade, toda a tela do usuário e então achei o código abaixo:
if (!document.fullscreenElement &&
!document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement ) {
if (document.documentElement.requestFullscreen) {
document.documentElement.requestFullscreen();
} else if (document.documentElement.msRequestFullscreen) {
document.documentElement.msRequestFullscreen();
} else if (document.documentElement.mozRequestFullScreen) {
document.documentElement.mozRequestFullScreen();
} else if (document.documentElement.webkitRequestFullscreen) {
document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
}
} else {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}
Esse funciona perfeitamente, porém coloca todo o documento em tela cheia, e eu quero apenas uma div especifica em fullscreen, como posso fazer isso?
Marcaram que essa pergunta é igual a essa, porém não é, as soluções apresentadas na mesma são as mesmas que estou indagando aqui para tentar adaptar ao meu uso. Existe alguma maneira de ativar a tela cheia do navegador com Javascript?