Come rilevare la risoluzione dello schermo con JavaScript?

C'è un modo che funziona per tutti i browser?

risposta originale

Sì.

window.screen.availHeight
window.screen.availWidth

aggiornamento 10-11-2017

Dagli tsunami nei commenti:

Per ottenere la risoluzione nativa di un dispositivo mobile, devi moltiplicare per il rapporto pixel del dispositivo: window.screen.width * window.devicePixelRatioe window.screen.height * window.devicePixelRatio. Questo funzionerà anche sui desktop, che avranno un rapporto di 1.

E da Ben in un'altra risposta:

In JavaScript vaniglia, questo ti darà la larghezza / altezza DISPONIBILE:

window.screen.availHeight
window.screen.availWidth

Per la larghezza / altezza assolute, utilizzare:

window.screen.height
window.screen.width

var width = screen.width;
var height = screen.height;

In JavaScript vaniglia, questo ti darà la larghezza / altezza DISPONIBILE :

window.screen.availHeight
window.screen.availWidth

Per la larghezza / altezza assolute, utilizzare:

window.screen.height
window.screen.width

Entrambi i precedenti possono essere scritti senza il prefisso della finestra.

Ti piace jQuery? Funziona in tutti i browser, ma ogni browser fornisce valori diversi.

$(window).width()
$(window).height()

Intendi risoluzione del display (ad es. 72 punti per pollice) o dimensioni dei pixel (la finestra del browser è attualmente 1000 x 800 pixel)?

La risoluzione dello schermo ti consente di sapere quanto sarà spessa una linea di 10 pixel in pollici. Le dimensioni dei pixel indicano quale percentuale dell'altezza dello schermo disponibile sarà occupata da una linea orizzontale larga 10 pixel.

Non c'è modo di conoscere la risoluzione del display solo da Javascript poiché il computer stesso di solito non conosce le dimensioni effettive dello schermo, solo il numero di pixel. 72 dpi è la solita ipotesi ....

Nota che c'è molta confusione sulla risoluzione del display, spesso le persone usano il termine anziché la risoluzione in pixel, ma i due sono piuttosto diversi. Vedere Wikipedia

Naturalmente, puoi anche misurare la risoluzione in punti per cm. C'è anche l'oscuro soggetto di punti non quadrati. Ma sto divagando.

Usando jQuery puoi fare:

$(window).width()
$(window).height()

Puoi anche ottenere la larghezza e l'altezza della FINESTRA, evitando le barre degli strumenti del browser e ... (non solo le dimensioni dello schermo).

Per fare ciò, utilizzare: window.innerWidth and window.innerHeightproperties. Guardalo su w3schools .

Nella maggior parte dei casi sarà il modo migliore, ad esempio, di visualizzare una finestra di dialogo modale mobile perfettamente centrata. Ti consente di calcolare le posizioni sulla finestra, indipendentemente dall'orientamento della risoluzione o dalle dimensioni della finestra che utilizza il browser.

Cercare di ottenerlo su un dispositivo mobile richiede alcuni altri passaggi. screen.availWidthrimane lo stesso indipendentemente dall'orientamento del dispositivo.

Ecco la mia soluzione per dispositivi mobili:

function getOrientation(){
    return Math.abs(window.orientation) - 90 == 0 ? "landscape" : "portrait";
};
function getMobileWidth(){
    return getOrientation() == "landscape" ? screen.availHeight : screen.availWidth;
};
function getMobileHeight(){
    return getOrientation() == "landscape" ? screen.availWidth : screen.availHeight;
};

Vedi Ottieni risoluzione dello schermo monitor con Javascript e l' window.screenoggetto

function getScreenWidth()
{
   var de = document.body.parentNode;
   var db = document.body;
   if(window.opera)return db.clientWidth;
   if (document.compatMode=='CSS1Compat') return de.clientWidth;
   else return db.clientWidth;
}

solo per riferimento futuro:

function getscreenresolution()
{
    window.alert("Your screen resolution is: " + screen.height + 'x' + screen.width);
}

Se si desidera rilevare la risoluzione dello schermo, è possibile verificare la risoluzione del plug-in . Ti permette di fare quanto segue:

var res = require('res')
res.dppx() // 1
res.dpi() // 96
res.dpcm() // 37.79527559055118

Ecco alcuni suggerimenti per la risoluzione di Ryan Van Etten, l'autore del plugin:

• Esistono 2 set di unità e differiscono su una scala fissa: unità del dispositivo e unità CSS.
• La risoluzione viene calcolata come il numero di punti che possono adattarsi a una determinata lunghezza CSS.
• Conversione unità: 1⁢in = 2,54⁢cm = 96⁢px = 72⁢pt
• CSS ha lunghezze relative e assolute. Nello zoom normale: 1⁢em = 16⁢px
• dppx è equivalente al rapporto pixel-dispositivo.
• La definizione di devicePixelRatio varia in base alla piattaforma.
• Le query multimediali possono avere come obiettivo la risoluzione minima. Usare con cura per la velocità.

Ecco il codice sorgente per res, ad oggi:

!function(root, name, make) {
  if (typeof module != 'undefined' && module.exports) module.exports = make()
  else root[name] = make()
}(this, 'res', function() {

  var one = {dpi: 96, dpcm: 96 / 2.54}

  function ie() {
    return Math.sqrt(screen.deviceXDPI * screen.deviceYDPI) / one.dpi
  }

  function dppx() {
    // devicePixelRatio: Webkit (Chrome/Android/Safari), Opera (Presto 2.8+), FF 18+
    return typeof window == 'undefined' ? 0 : +window.devicePixelRatio || ie() || 0
  }

  function dpcm() {
    return dppx() * one.dpcm
  }

  function dpi() {
    return dppx() * one.dpi
  }

  return {'dppx': dppx, 'dpi': dpi, 'dpcm': dpcm}
});