Virtuelle Tastatur skaliert Webseite

Question

Dies ist wahrscheinlich eine dumme Frage, aber ich bin so fest: Ich baue eine Seite mit einer Reihe von Eingabefeldern. Diese Eingabefelder sollten einen bestimmten Prozentsatz des Bildschirms ausfüllen, da die Auflösung auf verschiedenen Geräten variieren wird. So werde ich Stile wie diese haben:

input { height: 20%; } 

ich erwarten würde es die Höhe und halten es zu berechnen, aber das ist nicht, was passiert.

So ist meine Vermutung, dass, wenn die virtuelle Tastatur erscheint, deren Größe die Seite und die Eingabefelder haben 20% der neuen Höhe.

Nach einiger Frustration habe ich eine Seite mit nichts als einem Eingabefeld erstellt und überprüft, ob ich irgendwie daran gehindert werden kann, die Größe zu ändern. Heres funktioniert, was nicht:

in Prozent min-height -Einstellung

-trying Seitenhöhe

var initialHeight = document.body.scrollHeight; 
     window.onresize = function(event){ 
      document.body.scrollHeight = initialHeight; 
     } 

in js halten (? Heißt das Prozentsatz nur auf sichtbare Größen bezüglich)

-putting das Eingabefeld in einem div, die eine feste min-Höhe in Pixeln auf dem Eingabefeld selbst (in Pixel) nicht

eine Mindesthöhe hat scheinen zu funktionieren, aber es ist nicht die Lösung, nach der ich suche.

Wie erstelle ich ein Eingabefeld, das sich nicht ändert, wenn die virtuelle Tastatur auftaucht?

Answer 1

Stellen Sie die Höhe auf einen festen Wert ein, nicht auf einen Prozentwert. Wenn Sie es auf 20% setzen, sind es die 20% der Größe des übergeordneten Elements und die Skalierung mit dem übergeordneten Element, in diesem Fall die gesamte Seite.

Sie können das Viewport-Meta-Tag verwenden, um auf verschiedenen Geräten besser skalieren zu können. https://www.w3schools.com/css/css_rwd_viewport.asp