viewport di ridimensionamento tastiera mobile

Sto facendo un sito Web reattivo e ho questo problema. Tutto funziona bene finché non seleziono un [input type = "text"] e viene fuori dalla tastiera, l'intero sito viene ridimensionato, è come se la dimensione dello schermo fosse solo la parte sopra la tastiera. Voglio solo che mantenga la dimensione normale. Ho provato tutte le soluzioni proposte su StackOverflow anche su un altro forum, bun non sembra funzionare.viewport di ridimensionamento tastiera mobile

Qualcuno ha qualche idea su come risolvere questo problema?

<head> 
    <title>SchoolIn</title> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 

//other code

UPDATE: Io vado a cercare di spiegare meglio.

Ho una sezione di testa

//other code 
<div class="head"> 
    //Here is some text 
</div> 
//other code

Poi una sezione di contenuti

//other code 
<div class="container"> 
    <div class="content"> 
    //other code 
    <input type="text" ...... /> 
    <input type="password" ..... /> 
    <input type="submit" ..... /> 
    </div> 
</div> 
//other code

Tutto l'elemento sono in percentuale v'è niente in pixel.

Quando il mazzo di chiavi esce dall'intestazione, il contenitore e il contenuto div sono ridimensionati, invece i campi di input e il pulsante no. In ogni caso sono usciti dal loro contenitore, perché il contenitore diventa più piccolo e mantengono la dimensione originale. Non so se mi sono reso chiaro.

La domanda è la stessa, come faccio a rimanere alla dimensione originale quando la tastiera viene fuori?

fonte

2014-07-15 Daniel Srp

Come hai risolto il problema? (Penso di aver provato tutta la combinazione possibile, includendo la tua, ma senza successo. :(- Daniel Srp) – user2360915

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

Prova questo pezzo di html. Lo sto usando per tutte le mie pagine e ha sempre fatto quello che dovrebbe. Forse il tuo non funziona a causa dell'attributo di scala minima mancante.

fonte

2014-07-16 08:09:32 LikeAJohny

Penso di aver provato tutte le possibili combinazioni, inclusa la tua, ma senza successo.:( –

Se non c'è successo .. perché è stata contrassegnata come risposta accettata? – Lee

Pezzo di linea che ha salvato la mia app. – tapaljor

Ok ho fatto funzionare, almeno in parte. Il problema per me era che ho reso l'altezza HTML e BODY del 100%, quindi quando esce la tastiera l'altezza diventa la parte sopra di esso. Se non dichiaro nessuna altezza, funziona bene.

Ho detto in parte perché ho bisogno dell'altezza del dispositivo in modo da poter rendere la proporzione con gli elementi all'interno della pagina. Se non dichiaro l'altezza, il contenuto della pagina verrà visualizzato in alcuni smartphone per metà schermo, nell'altro corectly. Ho già fatto punti di rottura con la query multimediale, ma non riesco a crearne uno per ciascuna risoluzione. Ho creato alcuni intervalli (es: max-width: 320 ---- min-width: 321, max-width: 480 .... e così uno).

Ancora una volta qualche idea su come risolvere il problema dell'altezza?

fonte

2014-07-16 14:08:19

Hai trovato qualche soluzione a questo? –

Nessun <meta name='viewport'/> o percentuali correzioni lavorato nel mio caso (Android 2.3 del browser), quindi ho finito con questo CSS:

body { 
    min-height: 350px; 
}

È inoltre necessario fare questo per nulla con height:auto.

È un hack, ma almeno rende il sito Web utilizzabile in questo caso limite. Non appena l'utente tenta di eseguire lo zoom, si blocca fuori da esso.

fonte

2015-04-01 15:02:03 Dunc

viewport di ridimensionamento tastiera mobile

risposta

Problemi correlati