Objecte screen

L'objecte screen de JavaScript és un objecte del BOM (Browser Object Model) que proporciona informació sobre la pantalla o el monitor de l'usuari que executa el navegador web. A diferència de l'objecte window, que informa sobre la finestra del navegador, screen informa sobre les dimensions i la profunditat de color del dispositiu de visualització real.

Pots accedir-hi mitjançant window.screen o, simplement, screen.

Propietats de screen

Totes les propietats de l'objecte screen són de només lectura i s'expressen en píxels.

1. Dimensions totals de la pantalla

Aquestes propietats indiquen la resolució total de la pantalla del dispositiu.

2. Dimensions disponibles (sense barra tasques)

Aquestes propietats indiquen l'espai real de la pantalla que el navegador pot utilitzar, ja que exclouen elements fixes del sistema operatiu (com la barra de tasques o les dreceres).

3. Profunditat de color

Aquestes propietats són útils per a la compatibilitat de colors, tot i que avui dia la majoria dels dispositius utilitzen una alta profunditat de color.

Mètodes/Funcions de screen

Actualment, l'objecte screen no té mètodes propis àmpliament utilitzats o estandarditzats per manipular directament la pantalla. Totes les interaccions es basen en la lectura de les seves propietats. Les úniques funcions que històricament han estat associades o relacionades amb la pantalla (tot i que formen part de l'objecte window) són les que gestionen la finestra mateixa:

Nota: L'ús d'aquests mètodes per manipular la finestra està molt restringit pels navegadors moderns per raons de seguretat i d'experiència d'usuari, especialment en finestres que no han estat creades per l'script mateix (window.open()).

Exemples i casos d'ús

Detecció de resolució 

El cas d'ús més comú és detectar la resolució total o disponible per adaptar funcionalitats o notificar a l'usuari.

console.log(`Resolució total del monitor: ${screen.width} x ${screen.height}`);
console.log(`Àrea utilitzable (sense barres del sistema): ${screen.availWidth} x ${screen.availHeight}`);

// Cas d'ús: Alertar sobre resolucions molt baixes
if (screen.width < 1024) {
    document.getElementById('avís').textContent = "Aquesta web no està optimitzada per a la teva baixa resolució de pantalla.";
}

 

Optimització de Finestra o Pop-ups

Quan es crea una nova finestra emergent (pop-up), es pot utilitzar screen.width i screen.height per centrar-la o dimensionar-la de manera òptima.

function obrirFinestraCentrada(url) {
    const ampleFinestra = 800;
    const alturaFinestra = 600;

    // Calcula les coordenades per centrar la finestra a l'àrea disponible
    const centreX = (screen.availWidth - ampleFinestra) / 2;
    const centreY = (screen.availHeight - alturaFinestra) / 2;

    const especificacions = `width=${ampleFinestra},height=${alturaFinestra},left=${centreX},top=${centreY}`;

    window.open(url, 'FinestraPopup', especificacions);
}

// Cas d'ús: Obrir una finestra de login o de confirmació amb dimensions fixes i centrada.
// obrirFinestraCentrada('login.html');

Més informació a window.open

 Detecció de Profunditat de Color

Encara que poc comú avui dia, en el passat era útil per decidir si mostrar imatges d'alta qualitat o una versió simplificada.

console.log(`Profunditat de color: ${screen.colorDepth} bits`);

if (screen.colorDepth < 16) {
    console.warn("Pantalla amb colors limitats. Es desactiven els efectes de color complexos.");
    // Codi per carregar imatges en 16 bits en lloc de 24.
}

Detecció d'Orientació (Mòbils)

Tot i que l'objecte screen conté les dimensions, l'API per detectar i bloquejar l'orientació del dispositiu (vertical o horitzontal) resideix a screen.orientation (un sub-objecte).

// Obté l'orientació actual (p. ex., 'portrait-primary' o 'landscape-primary')
console.log(`Orientació actual: ${screen.orientation.type}`);

// Cas d'ús: Bloquejar l'orientació en un joc web
function bloquejarOrientacio() {
    if (screen.orientation && screen.orientation.lock) {
        screen.orientation.lock('landscape')
            .then(() => console.log("Orientació bloquejada a horitzontal."))
            .catch(error => console.error("No es pot bloquejar l'orientació:", error));
    }
}

// També es pot reaccionar als canvis d'orientació amb un listener
screen.orientation.addEventListener('change', () => {
    console.log(`L'usuari ha girat la pantalla a: ${screen.orientation.type}`);
});