iOS ritorno pessimo rapporto qualità-window.innerHeight/Larghezza

sto usando window.innerHeight e window.innerWidth istruzioni per ottenere dimensione della finestra disponibile del browser. Funziona con Firefox, Safari (su Mac) e Android ma ottengo risultati strani su iOS.iOS ritorno pessimo rapporto qualità-window.innerHeight/Larghezza

iOS restituisce sempre innerHeight = 1091 e innerWidth = 980.

Sto utilizzando l'emulatore iOS dall'SDK di iOS (non possiedo un iPhone/iPod). Lo stesso valore viene restituito con l'emulatore Retina per iPhone e iPhone. Non capisco come possano entrambi restituire gli stessi numeri perché i 2 modelli hanno 2 risoluzioni di schermi differenti.

Ho giocato con il parametro viewport senza successo.

fonte

2011-01-07 ohmer

Controllare la documentazione di Apple su come impostare la finestra per Safari Mobile, e come scale: http://developer.apple.com/library/safari/#documentation/appleapplications/reference/safariwebcontent/UsingtheViewport/UsingtheViewport.html

In sostanza, è possibile impostare una scala per la finestra, e renderlo di default a quello che vuoi impostando una meta tag sulla tua pagina HTML.

fonte

2011-01-07 21:19:56 pgb

ho trovato questa pagina prima di pubblicare qui. Non ero completamente sicuro che ciò fosse correlato, ma non ho trovato il modo in cui rendere Safari Mobile non in scala fino a 980x1091. Ho provato con ma non ho cambiato nulla. – ohmer

Se vuoi che la vista sia 320x480, dovresti provare '' – pgb

Non funziona ... safari restituisce ancora 980x1091 . – ohmer

Aggiungere

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no">

all'elemento <head>. Ciò risolverà il problema innerWidth.

La retina ha pixel ad alta densità, in pratica 4 pixel hardware con 1 pixel logico. Ecco perché riportano la stessa risoluzione.

fonte

2011-08-02 07:49:55

Non ha aiutato nel mio caso ... utilizzando Xcode 4.6.3 e iPhone 6.1 Simulator – Kozuch

'maximum-scale = 1.0; user-scalable = no' <= non farlo mai. Disattivare lo zoom è una pratica terribile per l'usabilità e l'accessibilità –

Ho dovuto mettere il mio controllo per 'innerWidth' in un' setTimeout' perché funzioni. Anche in un 'window.onload' mi dà 980. Ho il meta tag. 'screen.width' funziona subito. –

anche specificare l'altezza nella finestra meta tag in base a questo:

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />

ho avuto problemi con l'utilizzo jQuery $ .height (finestra)() sul mio iPad 2 (5.0.1) in quanto Ho omesso di specificare l'altezza nel meta tag. Dopo averlo aggiunto funziona molto meglio.

fonte

2012-02-17 08:47:00 Valleywood

Questo si interrompe se si dispone di un'app iOS che non è a schermo intero.Renderà le dimensioni della tua pagina web a dimensioni di schermo intero anche se è incorporato solo nel pannello di destra di una vista divisa. –

Prova a utilizzare screen.width anziché window.innerWidth.

<script> 
    if (screen.width > 650) { 
    .... 
    } 
</script>

fonte

2015-10-13 09:34:07 Senya

Una cosa da notare con questo approccio quando si scrive CSS cross-browser, si vuole ricordare che 'screen.width' sul desktop sarà alto, in quanto segnalerà la larghezza dei pixel della risoluzione dello schermo sul sistema operativo stesso, non la larghezza del pixel della finestra del browser web. – f1lt3r

Questo deve essere contrassegnato come la risposta corretta –

Era bloccato sullo stesso problema. Ecco la soluzione che ha funzionato per me.

Per prima cosa sto rilevando se il client è un dispositivo iOS. Poi mi sto valori corretti utilizzando Screen interface

var iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream; 
var iw = (iOS) ? screen.width : window.innerWidth, ih = (iOS) ? screen.height : window.innerHeight;

fonte

2016-09-06 09:51:23

'window.innerWidth' varia a seconda dell'orientamento su iPhone. Dovrai anche guardare a 'window.orientation'. –

iOS ritorno pessimo rapporto qualità-window.innerHeight/Larghezza

risposta

Problemi correlati