Ottieni la risoluzione dello schermo su un sito web mobile

Question

Sto progettando un sito Web mobile con una sezione per scaricare gli sfondi. Per soddisfare molti utenti, desidero rendere possibile il download di uno sfondo in base alla risoluzione dello schermo. Voglio rilevare la risoluzione da JavaScript e mostrare lo sfondo appropriato.

Questo è quello che ho trovato in rete e provato e fallito xD:

width = window.innerWidth || document.body.clientWidth 
height = window.innerHeight || document.body.clientHeight; 

Per il mio SGS3, che ha la risoluzione di 720x1280 ho la 360x567.

Come devo scoprire la risoluzione del telefono da JavaScript?

Answer 1

Si può forse utilizzare l'oggetto screen:

var w = screen.width; 
var h = screen.height; 

Aggiornamento - tenta di utilizzarlo con il window.devicePixelRatio:

var ratio = window.devicePixelRatio || 1; 
var w = screen.width * ratio; 
var h = screen.height * ratio; 

Answer 2

È possibile utilizzare window.screen.width e window.screen.height per rilevare la risoluzione dello schermo di il dispositivo.

Answer 3

Ciò funzionerà in dispositivo mobile troppo

screen_width = document.documentElement.clientWidth; 
screen_heght = document.documentElement.clientHeight; 

Answer 4

Ken Fyrstenberg, grandi cose, grazie. Stavo cercando un modo semplice per rilevare tutte le possibili dimensioni dello schermo e i dati di risoluzione, e per rispondere alla domanda su quale sia il rapporto adatto, ti permette di vedere se è ad esempio un dispositivo ad alta risoluzione tipo display retina.

wh:768x1024 cwh:768x905 rwh:1536x2048 ts:touch 

in combinazione con i test tocco controllare questo correlato SO:

posso ottenere un ottimo senso dello schermo reale/toccare le specifiche dei dispositivi nostri utenti reali sono in esecuzione.

per il web, ovviamente, ciò che realmente ti interessa è la dimensione della finestra interna del browser, lo spazio che ti è stato assegnato sul dispositivo. Come per inciso, ho già visto che i dispositivi Apple sembrano dare sempre le dimensioni in modalità verticale, ad esempio 768 x 1024 per un iPad con display non retina, il che è un po 'fastidioso perché speravo anche di imparare come la maggior parte degli utenti effettivamente interagire con il web e il nostro sito.

Android sembra dare l'effettiva larghezza/altezza di quel momento, cioè, orizzontale o verticale, larghezza/altezza.

Ad esempio:

var ratio = window.devicePixelRatio || 1; 
var is_touch_device = 'ontouchstart' in document.documentElement; 
var touch_status = (is_touch_device) ? 'touch' : 'no-touch'; 
touch_status = ' ts:' + touch_status; 
var width_height = 'wh:' + screen.width + 'x' + screen.height; 
var client_width_height = ' cwh:' + document.documentElement.clientWidth + 'x' + document.documentElement.clientHeight; 
var rw = screen.width * ratio; 
var rh = screen.height * ratio; 
var ratio_width_height = ' r:' + ratio + ' rwh:' + rw + 'x' + rh; 
var data_string = width_height + client_width_height + ratio_width_height + touch_status; 

Questo crea un sacco di dati sul sistema client che si può poi passare a qualcosa usando qualsiasi metodo che ti piace.

UPDATE: appena ha preso un paio di minuti usando questo metodo per trovare il modo i dispositivi Apple in realtà riportano la loro larghezza/altezza:

wh:375x667 cwh:667x375 r:2 rwh:750x1334 ts:touch Device type: mobile 

Come si può vedere, il metodo document.documentElement.clientWidth riporta la larghezza effettiva se ritratto/paesaggio, roba buona.