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):

CSS

@media all and (display-mode: fullscreen) {
    body {
        background-color: #800;
    }
}
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(...):

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;
    }
}
la parte HTML

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>
e infine la parte JavaScript

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.
Tags:
CSS19 HTML74 HTML 554 JavaScript184
Potrebbe interessarti anche: