3

Firstly, I'm well aware that this question has been asked before but there's never been a solution to fix the issue across all devices.

It's been asked at vh / % units and keyboard on mobile devices , Ignore or disable mobile viewport resize due to keyboard open for text inputs on mobile web? , and Android Keyboard shrinking the viewport and elements using unit vh in CSS.

I have researched this and tried a few JavaScript & jQuery methods but I can't seem to find a solution that works.

When the keyboard opens in mobile it shrinks the height of the viewport, text and inputs that have been sized with vh all get shorter. I need a way of calculating the initial page viewport height when it loads and then sticking with that height even if the viewport shrinks so that all page items are the same height as if the keyboard wasn't there.

Below is an example of how the inputs look before and after keyboard activation then to the right there's an example of the desired behaviour. I'd like to base vh on the initial height of the viewport for mobile as headers, text, icons and inputs are all sized via vh.

Image showing current vs desired behaviour.

Any help would be appreciated.

EDIT

This question was originally posted on October 30th 2019. This update is being added on July 15th 2020 now that I've had time to look into these briefly after remembering this question a week or so ago. Microsoft's switch to Chromium has been beneficial in many ways but has now caused Chrome to acknowledge this properly with their latest announcement under the heading of Scrolling

How virtual keyboards affect - or don't affect - viewport units in different browsers. (Note recent work from Microsoft Edge on a VirtualKeyboard API that may help here.)

You can read the blog post titled Improving Chromium's browser compatibility in 2020 by clicking it and more about Intent to Prototype: VirtualKeyboard API by clicking that too. Hopefully this helps someone who finds this question in the future.

Matt Deacalion
  • 5,692
  • 2
  • 20
  • 50
learningtoanimate
  • 888
  • 2
  • 17
  • You should find an answer here: https://stackoverflow.com/questions/8556933/screen-styling-when-virtual-keyboard-is-active – Tobias Glaus Oct 14 '19 at 08:55
  • It's close but relies on rewriting all of the CSS again for when that class is active. The idea, as posed in my question, was to calculate the original height then using JavaScript set vh to mean 1% of the original height, no matter if screen size changes. – learningtoanimate Oct 15 '19 at 00:34
  • This was very helpful, thank you. It's too bad there doesn't seem to be much movement with the VirtualKeyboard API, fingers crossed for the future. – Matt Deacalion Feb 26 '21 at 15:18
  • Seems none at all, I've switched to using px as a result of this for things like inputs, the rest of the time an occasional webkit calc is used but until this is fixed sizing based on viewport, at least for mobile is horrible for scaling @MattDeacalion – learningtoanimate Feb 28 '21 at 00:36

0 Answers0