Jednostki vh /% i klawiatura na urządzeniach mobilnych

Question

Mam problem z jednostkami takimi jak vh/% dla wysokości. Gdy aktywny jest dowolny input, klawiatura na urządzeniach mobilnych zmienia wysokość elementów. Szukam rozwiązania, aby zmienić go na wysokość statyczną, gdy klawiatura jest aktywna.

jsfiddle (otwarty na urządzeniu mobilnym)

Answer 1

Problem jest dość straightfoward, my wszyscy doświadczyli wcześniej.

Na szczęście rzadko pracuję na stronach internetowych, które mają elementy, które muszą idealnie pasować w zależności od rozmiarów widocznego obszaru, jednak kiedy to zrobię, wolę użyć rozwiązania jQuery, aby to osiągnąć.

Mam zamiar wyjść na kończynę i założyć, że wystarczy zastosować ten typ reguły na telefonie komórkowym, więc zamierzam dodać to do kodu.

jQuery(document).ready(function($){ //wait for the DOM to load 
    if($(window).width() > 640) { //check if screen width is less than 640px (i.e. mobile) 
     $('#my-element').css({ 'height' : $(window).height() }); 
    } 
}); 

Jest możliwe, aby edytować wysokość bezpośrednio poprzez zmianę działania mające na celu:

$('#my-element').height($(window).height()); 

ale konkretnie chcesz zastąpić regułę CSS, który stwierdził coś wzdłuż linii:

#my-element { height: 100vh; } 

I've edited your codepen to include my example.