rendere un elemento a schermo intero nella pagina web

Qualche idea per rendere un elemento nella pagina a schermo intero?

Ad esempio, un div o un img?

Con “schermo intero” intendo che dovrebbe occupare tutto lo spazio dello schermo dell’utente, proprio come quando guardiamo un video con il modello a schermo intero. Non desidero visualizzare la barra delle attività / la barra dei menu della finestra del browser.

Qualche idea?

div.fullscreen{ display:block; /*set the div in the top-left corner of the screen*/ position:absolute; top:0; left:0; /*set the width and height to 100% of the screen*/ width:100%; height:100%; background-color:red } 

Ho provato il codice di cui sopra, tuttavia non è quello che voglio, ma juse occupa tutto lo spazio del contenuto del browser piuttosto che lo schermo del computer dell’utente.

Gli elementi HTML non possono uscire dai limiti della finestra del documento del browser. Il menu e la barra degli strumenti si trovano all’esterno della finestra del documento (che è un elemento secondario della finestra del browser), quindi non è ansible “raggiungerli”.

Penso che l’unica soluzione sia triggersre la modalità a schermo intero con JavaScript.

Questa risposta mostra come puoi farlo: Come rendere la finestra a schermo intero con Javascript (che si estende su tutto lo schermo)

C’è un api JavaScript a schermo intero relativamente nuovo che può rendere un elemento a schermo intero.

Deve essere chiamato come il risultato dell’input dell’utente per prevenire possibili abusi, ma è relativamente semplice da usare:

Codice dall’articolo MDN:

 document.addEventListener("keydown", function(e) { if (e.keyCode == 13) { toggleFullScreen(); } }, false); function toggleFullScreen() { if (!document.fullscreenElement && // alternative standard method !document.mozFullScreenElement && !document.webkitFullscreenElement) { // current working methods if (document.documentElement.requestFullscreen) { document.documentElement.requestFullscreen(); } else if (document.documentElement.mozRequestFullScreen) { document.documentElement.mozRequestFullScreen(); } else if (document.documentElement.webkitRequestFullscreen) { document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT); } } else { if (document.cancelFullScreen) { document.cancelFullScreen(); } else if (document.mozCancelFullScreen) { document.mozCancelFullScreen(); } else if (document.webkitCancelFullScreen) { document.webkitCancelFullScreen(); } } } 

Questo non è ansible ora, e probabilmente non lo sarà mai.

Immagina cosa succederebbe se ogni sito web che visitassi avesse libero dominio sul tuo desktop.