2012-05-09 29 views
9

Sto cercando di ottenere le dimensioni dello schermo disponibili in iPhone Safari al fine di ridurre un contenitore all'altezza dello schermo, meno la barra di stato e la barra degli strumenti.iPhone Safari screen.availAltezza e barra di stato/barra degli strumenti/barra degli indirizzi

Poiché iOS restituisce sempre le dimensioni dello schermo come se il telefono fosse in posizione verticale, sto utilizzando screen.availWidth per calcolare l'altezza in orizzontale. Le seguenti sono le dimensioni restituiti: Conti

differenza
screen.width; //320 
screen.availWidth; //300 

Il 20px per la barra di stato in alto sul telefono, ma non prende in considerazione la barra dei pulsanti (barra degli strumenti) nella parte inferiore dello schermo.

C'è qualche proprietà che posso usare che restituirebbe 268px?

Vorrei solo fare (screen.availWidth - 32) ma c'è la possibilità che l'utente aggiunga il sito come segnalibro sul desktop, nel qual caso questa barra non sarà presente e il valore 300px sarebbe corretto.

+0

Dopo ulteriori ricerche e sperimentazione, l'availWidth 300 ha senso: è l'altezza meno la barra di stato di 20px. In altre parole, meno il chrome del sistema operativo e non il chrome del browser. Il valore era anche errato per una versione iOS precedente e quindi non consiglierei di fare affidamento troppo su di esso. – howard10

+0

Controlla la mia risposta a una domanda simile, potrebbe aiutare un po 'http://stackoverflow.com/questions/8205812/jquery-js-ios-4-and-document-height-problems –

risposta

10

Non ho la risposta esatta, ma è possibile determinare se l'utente si trova in Mobile Safari o nel segnalibro desktop con la proprietà navigator.standalone. Con questo puoi decidere se sottrarre 32px o meno.

Modifica: Trovato la risposta. Utilizzare <meta name="viewport" content="user-scalable=no, width=device-width, height=device-height" /> e quindi il valore corretto può essere ottenuto da window.innerWidth/window.innerHeight

+0

Avendo letto [questo] (http: // tripleodeon.com/2011/12/first-understand-your-screen/), stavo arrivando a conclusioni simili. Grazie per avermi indicato nella giusta direzione. – howard10

Problemi correlati