La tastiera Android non si apre quando si utilizzano le query multimediali

Ho un sito mobile che include una casella di ricerca nella parte inferiore. Uso anche le query multimediali per nascondere il contenuto in modalità verticale e visualizzarlo in modalità orizzontale.La tastiera Android non si apre quando si utilizzano le query multimediali

Tuttavia nei dispositivi Android quando faccio clic sul campo di ricerca la tastiera si apre e si chiude immediatamente, rendendo impossibile digitare nella casella.

Questo non è un problema in iOS.

La pagina può essere vista qui - http://so.ajcw.com/android-keyboard.htm ed ecco il codice pagina intera:

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
<head> 
    <meta http-equiv="Content-type" content="text/html; charset=UTF-8"> 
    <title>Erroring search field</title> 

    <style>  
    .address { display: none; } 

    @media only screen and (orientation: landscape) { 
     .address { display: block; } 
    } 
    </style> 

</head><body> 

<h3>Venue 1</h3> 
<p>Cuisine</p> 
<p>Price</p> 
<p>Rating</p> 
<p class="address">Address</p> 

<h3>Venue 2</h3> 
<p>Cuisine</p> 
<p>Price</p> 
<p>Rating</p> 
<p class="address">Address</p> 

<form><input type="text"></form> 

</body></html>

di cosa che ho provato

Se ho solo un luogo, o se io sposta la ricerca nella pagina il problema scompare (questa non è una soluzione, solo un'osservazione).
Ho provato a cambiare il DOCTYPE - un DOCTYPE HTML5 cambia leggermente la funzionalità che la tastiera rimane dopo la seconda clic, ma ancora una volta non risolve il problema.

* modificare *

Questo sembra essere specifico browser. Un vecchio telefono Android non ha il problema, né sembra il browser predefinito del mio Android (HTC Desire), ma succede in Dolphin HD.

fonte

2011-09-22 ajcw

Accade sul mio Motorola Triumph. –

Utilizzando Adam's research il problema è risolto evitando di usare l'orientamento. La soluzione che funziona per me è preso da this CSS3 'boilerplate', e usa min e max larghezze in questo modo:

@media only screen and (max-width: 320px) { 
    .address { display: none; } 
} 

@media only screen and (min-width: 321px) { 
    .address { display: block; } 
}

Questo può essere visto in azione qui - http://so.ajcw.com/android-keyboard-solved.htm (http://goo.gl/nNIm9)

Tuttavia questa soluzione non è ideale come l'uso di dimensioni fisse finirà per rompersi quando le risoluzioni dei dispositivi cambiano.

fonte

2011-10-10 09:29:18 ajcw

Questa non è una soluzione, ma un po 'dire penso. Quando ho aggiunto float: left e position: relativo ottengo il comportamento che descrivi quando si modifica il doc-type. Al secondo clic quando viene visualizzata la tastiera, vengono visualizzati anche gli elementi del paesaggio. Sembra un singhiozzo nell'orientamento: paesaggio per Android.

.address {display:none} 

@media only screen and (orientation: landscape) { 
    .address {color:red;display:block;float:left;position:relative} 
}

Data la grande differenza di dimensioni dello schermo in questi giorni. Suggerirei di allontanarmi dall'uso dell'orientamento e utilizzare invece le larghezze massime e minime.

AGGIORNAMENTO: Ok penso di averlo confermato almeno sul mio Motorola Triumph nel browser Android, orientamento: panorama non completamente supportato. Ho usato il seguente e cliccando la casella di testo con orientamento verticale innescato gli stili di paesaggio da visualizzare ...

@media only screen and (orientation: landscape) { 
    BODY {background:pink} 
}

fonte

2011-10-03 19:09:23

La mia ipotesi migliore è che per qualsiasi motivo il browser Android pensi che sia in modalità orizzontale quando la tastiera su schermo è aperta. –

Grazie Adam - la tua supposizione che l'orientamento: il paesaggio non è completamente supportato mi porta a trovare un'altra soluzione. – ajcw

La tastiera Android non si apre quando si utilizzano le query multimediali

risposta

Problemi correlati