2013-09-22 9 views
12

Ho problemi con una app Web a schermo intero (salvata su schermata iniziale) per iPhone su iOS7.webkit - moduli di scorrimento a sfioro interrotti su iOS 7 web app a schermo intero

In genere, quando un input è selezionato, è stato spostato in vista sopra la tastiera.

Tuttavia, questo non sembra accadere su iOS7 per lo scorrimento DIV in un'applicazione web a schermo intero.

Pertanto, quando un DIV utilizza "-webkit-overflow-scrolling: touch" e si fa clic su un input nella metà inferiore dello schermo, viene attivata la tastiera, ma l'input non scorre verso l'alto.

E, in quel momento, l'input non risponderà ad altri eventi onFocus che altrimenti potrei far scorrere.

Qualcuno ha visto una soluzione alternativa?

risposta

17

L'aggiornamento del metatag viewport è stato risolto per me.

ho cambiato questo:

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

A tal:

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, target-densityDpi=device-dpi" /> 

height=device-height è la correzione reale (senza di essa la finestra viene ridimensionata per ospitare la tastiera).

+1

Fantastico! L'altezza dell'altezza del dispositivo sta per rompere alcune altre cose sulla nostra app (abbiamo una barra di fondo fissata che sale sopra la tastiera quando viene utilizzata l'altezza del dispositivo, perché iOS7 riduce l'altezza del dispositivo quando la tastiera mostra). MA. . . impostandolo in modo esplicito su qualcosa di molto grande, come 10000 pixel lo rende per lo più funzionante, a parte molti spazi bianchi extra. (Lo spazio bianco extra è certamente il minore dei mali, comunque.) –

+2

target-densityDpi = device-dpi è deprecato e puoi facilmente rimuoverlo. https://petelepage.com/blog/2013/02/viewport-target-densitydpi-support-is-being-deprecated/ –

+0

Questo funziona per me, ma poi ottengo questo problema: http://stackoverflow.com/questions/11804428/jquery-mobile-altezza-problema-per-iphone-web-app-assume-page-altezza-del-480-instea –

0

Ha funzionato sulla mia WebApp rimuovendo le impostazioni di altezza.

Problemi correlati