Vh /% units and keyboards on mobile devices

Question

I have a problem with units like vh / % for heights. When any input active, the keyboard on mobile devices changes the height of the elements. I am looking for a solution to change it to a static height when the keyboard is active.

jsfiddle (open on mobile device)

Answer 1

The question is quite straightforward, we all experienced this before.

Fortunately, I rarely work on websites that have elements that should fit perfectly with the size of the viewports, however, when I do this, I prefer to use the jQuery solution to achieve this.

I am going to go on a limb and assume that you need to apply this type of rule only on mobile devices, so I will add this to the code.

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

You can edit the height directly by changing the action to:

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

but we specifically want to rewrite the CSS rule that indicated something in the lines:

 #my-element { height: 100vh; } 

I edited the code to include my example .