Come applicare uno specifico CSS quando si è in fullscreen
Tramite le media query dei CSS è possibile
Ad esempio per cambiare il colore dello sfondo quando si è in fullscreen, la media query da applicare è questa (display-mode: fullscreen):
Esistono anche altre opzioni oltre a fullscreen, come: standalone, minimal-ui e browser. Per una descrizione dettagliata vedi MDN display-mode
E' anche possibile eseguire del codice JavaScript quando la media query viene applicata o meno. Lo si fa tramite window.matchMedia(...):
Quello che segue è un esempio di utilizzo.
Per provarlo premi il tasto F11 che permette di attivare o disattivare la modalità fullscreen:
vedrai colorarsi lo sfondo della modalità attiva (fullscreen o browser) tramite CSS e comparire le scritte ON e OFF tramite l'evento gestito in JavaScript.
Questo è il codice dell'esempio per la parte CSS:
la parte HTML
e infine la parte JavaScript
Vedi anche MDN MediaQueryListEvent e MDN display-mode.
Ad esempio per cambiare il colore dello sfondo quando si è in fullscreen, la media query da applicare è questa (display-mode: fullscreen):
CSS
@media all and (display-mode: fullscreen) {
body {
background-color: #800;
}
}
E' anche possibile eseguire del codice JavaScript quando la media query viene applicata o meno. Lo si fa tramite window.matchMedia(...):
JavaScript
window.matchMedia('(display-mode: fullscreen)')
.addListener(function (ev) {
if (ev.matches) {
// media query applicata
} else {
// media query non applicata
}
});
Quello che segue è un esempio di utilizzo.
Per provarlo premi il tasto F11 che permette di attivare o disattivare la modalità fullscreen:
Fullscreen CSS Test - Sgart
Fullscreen
browser
Premi F11 per andare in Fullscreen
vedrai colorarsi lo sfondo della modalità attiva (fullscreen o browser) tramite CSS e comparire le scritte ON e OFF tramite l'evento gestito in JavaScript.
Gli eventi JavaScript, a differenza dei CSS che vengono applicati immediatamente, partono solo ad un cambiamento della modalità fullscreen.
Questo è il codice dell'esempio per la parte CSS:
CSS
p {
width: 300px;
background-color: #444;
color: #ccc;
position: relative;
}
p span {
color: #ff0;
font-weight: bold;
float: right;
}
@media all and (display-mode: fullscreen) {
.sgart-fullscreen {
background-color: #800;
}
}
@media all and (display-mode: browser) {
.sgart-browser {
background-color: #800;
}
}
HTML
<div>Premi <b>F11</b> per andare in <b>Fullscreen</b></div>
<p class="sgart-fullscreen">Fullscreen <span id="status-fullscreen"></span></p>
<p class="sgart-browser">browser <span id="status-browser"></span></p>
<div>Premi F11 per andre in Fullscreen</div>
JavaScript
window.matchMedia('(display-mode: fullscreen)')
.addListener(function (ev) {
if (ev.matches) {
writeStatus("status-fullscreen", true);
} else {
writeStatus("status-fullscreen", false);
}
});
// uso le arrow function e il destructor di ES6
window.matchMedia('(display-mode: browser)')
.addListener(({ matches }) => {
if (matches) {
writeStatus("status-browser", true);
} else {
writeStatus("status-browser", false);
}
});
function writeStatus(id, active) {
document.getElementById(id).innerHTML = active ? "ON" : "OFF";
}
Vedi anche MDN MediaQueryListEvent e MDN display-mode.