Stylisation de l'écran lorsque le clavier virtuel est actif

Question

Idéalement, je voudrais que l'ensemble de l'interface ait un style personnalisé tel qu'il est vu sur iOS (itouch / ipad) ou l'équivalent Android avec le clavier virtuel présent. Voir ci-dessous pour plus de détails.

Un ensemble de règles de piratage CSS personnalisées qui s'activent lorsque le clavier est "présent" est également une solution acceptable.

Cible à la fois les appareils Android et iOS, sur un site web (HTML/JavaScript/CSS). Notez également que la mise en page est : "fluide".

Édition : Il s'agit davantage de design que de texte ; les changements ne sont donc pas déroutants. En gros, je ne désire qu'un changement de design avec et sans les touches virtuelles (Peut-être juste un changement d'arrière-plan).

La question de savoir si c'est une bonne ou une mauvaise idée de design est sujette à débat. Cependant, je trouve que c'est sans importance par rapport à la question. Une telle manipulation peut avoir des utilisations autres que le texte (comme les jeux ou les médias interactifs).

D'où la prime : Bien que je n'aie plus besoin de la réponse pour le projet sur lequel je travaillais (un design alternatif a été utilisé), je pense toujours que cette question peut bénéficier d'une réponse.

Comportement par défaut

                       +--------+ 
                       |        |
+------------+       +-+-hidden-+-+   <- ~50% caché
| +--------+ |       | +--------+ |
| |        | |       | |visible | |
| |        | |   \   | |        | |   <- ~50% visible
| |  100%  | |  ==>  | +--------+ |
| |        | |   /   | |virtual | |
| |        | |       | |  keys  | |
| +--------+ |       | +--------+ |
+------------+       +------------+

Comportement souhaité

+------------+       +------------+   
| +--------+ |       | +--------+ |
| |        | |       | |visible | |   <- 100% visible (exemple de style)
| |        | |   \   | |        | |      Style personnalisé
| |  100%  | |  ==>  | +--------+ |
| |        | |   /   | |virtual | |
| |        | |       | |  keys  | |
| +--------+ |       | +--------+ |
+------------+       +------------+

Answer 1

J'utilise une requête media CSS simple pour déplacer les entrées actives vers le haut de l'écran sur les mobiles lorsque le clavier est ouvert. Quelque chose comme cet exemple minimaliste :

/* CLAVIER MOBILE EST OUVERT */
@media only screen and (max-width: 430px) and (max-height:400px){
    input:focus{
        position: fixed;
        top:50px;
    }
}

Answer 2

Vous devrez probablement utiliser des fragments pour la mise en page.
http://developer.android.com/guide/topics/fundamentals/fragments.html

En ce qui concerne la vérification si le clavier est affiché ou non :
Android: Le clavier logiciel est-il affiché?

Answer 3

Vous devez ajuster la hauteur du viewport par vous-même, iOS et Android ne le font pas.

Mais il existe une librairie pour le corriger:

https://github.com/adamjgrant/a-viewport-that-works