Wie wird das Layout beim Anzeigen der Tastatur beibehalten?

Ich habe ein Spielzeug-Beispiel für eine HTML-Anwendung in Cordova (Code unten), die mit allem im Verhältnis zur Größe des Darstellungsbereichs (entweder Position: absolute und Prozent oder Vh-Einheiten für Schriftarten) ausgelegt ist.Wie wird das Layout beim Anzeigen der Tastatur beibehalten?

Wenn eine Tastatur angezeigt wird, schrumpft unerwartet das Ansichtsfenster vertikal, was zu dem Layout führt, das im zweiten Screenshot gezeigt wird.

;

Ich möchte, dass das ursprüngliche Layout genau so ausgeführt wird, wie es hier ist, relativ zur vollen Breite/Höhe des Ansichtsfensters, aber damit es die Größe nicht ändert, wenn die Tastatur angezeigt wird; Vielmehr sollte es so groß bleiben, wie es vor dem Auftauchen der Tastatur war.

Wie mache ich das?

HTML/CSS-Code:

<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> 
<meta name="mobile-web-app-capable" content="yes"> 
<meta name="apple-mobile-web-app-capable" content="yes"> 

<style type="text/css"> 

.main { 
    font-size: 4vh; 
    color: #000000; 
    position:absolute; 
    top:12%; 
    left:5%; 
    width:90%;" 
} 

.button { 
    background: #006000; 
    font-size: 4vh; 
    color: #FFFFFF; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    position:absolute; 
    top:85%; 
    left:0%; 
    width:100%; 
    height:15% 
} 

html,body { 
    height: 100%; 
    width:100%; 
    background-color:#FFFFFF; 
    overflow: hidden; 
} 

</style> 
</head> 
<body> 

<div class="screen"> 
    <div class="main"> 
    Type in something:<br/><br/> 
    <input type="text"> 
    </div> 

    <div class="button"> 
    Next 
    </div> 
</div> 



</body> 
</html>

P. S. Es wäre schön, wenn die Ansicht automatisch gescrollt, so dass das ausgewählte Eingabefeld sichtbar ist, aber das ist eine separate Frage :)

Umgebung: Cordova 5.1.1, Android SDK 23, Android-Emulator läuft auf Ubuntu 14.04.

Quelle

2016-09-15 Alex I

Sie haben für android:windowSoftInputMode im AndroidManifest.xml auf den Wert zu ändern.

Gehen Sie zu Ihrem Ordner platforms/android/.
öffnen AndroidManifest.xml Datei
Im <activity> Element den Wert für android:windowSoftInputMode"adjustResize"-"adjustPan"

zur weiteren Lektüre

Dokumentation ändern here finden.

Ich würde auch empfehlen, UI-Frameworks wie ionic zu verwenden und cordova-plugins wie ionic-plugin-keyboard für z. bessere Handhabung der Tastatur (Cordova UI docs).

Quelle

2016-09-15 07:24:46 Beat

Das funktioniert super! Es sollte die kanonische Antwort auf diese Frage für Cordova sein. Ich hoffe, es wird Tonnen von Upvotes :) –

Sie müssen Schriftgröße und -höhe im PX-Format nicht in "VH" eingeben, da VH nach Bildschirmgröße arbeitet. Ich habe dieses Problem mit PX behoben.

Bitte schauen Sie in Code Stift

Quelle

2016-09-15 07:12:48

http://codepen.io/santoshkhalse/pen/YGqZqR –

Hallo Santosh, Danke, aber ich möchte, dass alle Layout relativ zu Ansichtsfenster Größe zunächst getan werden (einschließlich Schriftgrößen usw.). Ich will nur, dass es nach dem ersten Layout * nicht mehr verändert wird. Dies wird auf Geräten mit sehr unterschiedlichen Auflösungen sein, so dass px Größen nicht gut funktionieren werden. –

Sie können onFous jQuery schreiben. bedeutet, wenn Sie den Fokus auf den Eingabetyp legen, dass die CSS-Zeit so sein sollte, wie ich sie angegeben habe (in PX) und nach der Unschärfe in VH. –

Wie wird das Layout beim Anzeigen der Tastatur beibehalten?

Antwort

Verwandte Themen