Come ottenere la risoluzione video (schermo) con codice JavaScript
Se ti serve conoscere la risoluzione dello schermo dell’utente (es. 1920×1080) o le dimensioni effettive della finestra del browser (viewport), JavaScript ti permette di recuperare questi dati in modo semplice.
Questa informazione è utile per:
- Adattare layout e contenuti in modo dinamico
- Debug responsive
- Mostrare informazioni tecniche all’utente
- Verificare scaling / zoom / orientamento su mobile
Differenza tra “risoluzione schermo” e “dimensione finestra”
Risoluzione schermo (screen resolution): dimensione totale del display (es. 1920×1080)
Viewport (browser window): area visibile della pagina nel browser (es. 1365×768)
Entrambe possono essere utili, ma non sono la stessa cosa.
Spiegazione del codice JavaScript
Il codice utilizza JavaScript per rilevare automaticamente la risoluzione dello schermo dell’utente e mostrarla nella pagina.
Vediamo in modo semplice cosa fa:
1. Viene creata una funzione chiamata mostraRisoluzione().
Una funzione è un blocco di istruzioni che può essere eseguito quando serve.
2. All’interno della funzione vengono lette due informazioni:
- window.screen.width → larghezza dello schermo in pixel
- window.screen.height → altezza dello schermo in pixel
Questi valori rappresentano la risoluzione reale del monitor (es. 1920 × 1080).
3. Il risultato viene inserito nella pagina HTML tramite:document.getElementById("risoluzione").innerHTML
Questo comando cerca un elemento con id="risoluzione" e scrive al suo interno il testo con la risoluzione rilevata.
4. Infine, la funzione viene eseguita con: mostraRisoluzione();
In questo modo la risoluzione viene mostrata automaticamente al caricamento della pagina.
In sintesi
Il codice:
- Legge la risoluzione dello schermo
- Combina larghezza e altezza
- Mostra il risultato direttamente nella pagina
È una soluzione semplice e immediata per ottenere informazioni tecniche sul dispositivo dell’utente.
Variante minimale (solo risoluzione schermo)
<script>
alert("Risoluzione schermo: " + screen.width + "x" + screen.height);
</script>
Scaricando il file potrai analizzare, utilizzare e personalizzare il codice.
