How to adjust Height When Virtual Keyboard Appears?
Does anyone know if Kevin has a video explaining how to adjust a website's height based on the appearance or disappearance of a mobile device's virtual keyboard?
I found Kevin's video on vh vs svh vs dvh https://www.youtube.com/watch?v=ru3U8MHbFFI very helpful. Around 4:10 he talks about how these values do not accommodate for the mobile devices virtual keyboard because the virtual keyboard is not considered browser UI.
Kevin Powell
YouTube
Use these instead of vh
Looking to step up your CSS game? 👉 https://kevinpowell.co/courses?utm_campaign=general&utm_source=youtube&utm_medium=viewportunits I have a bunch of courses, including several free ones.
I see people use
vh a lot, and then complain that it doesn’t work the way they thought it would, so in this one, I explore a few other options that we ...11 Replies
There's no way to do that afaik. From what I remember (I haven't looked into this in a long time and might be wrong), but the keyboard is more of a floating element, which is why it's not considered part of the UI for viewport units sake.
Looks like this is being worked on, but it's Chrome only atm, and it's been in Chrome for awhile now, so I'm not sure if the others are showing interest in this one... https://developer.chrome.com/docs/web-platform/virtual-keyboard
Thank you for this explanation
I was able to OK reproduce the bug
We're good so far
But then when I have my keyboard up and I scroll
this crappy thing happens
this happens only on iOS safari mobile
here's the code pen
i mean this is crazy -- when i select the html element through safari's debug developer tools, that's the blue box i'm selecting
lol ok wow
Reddit
Possible_Ad2621's comment on "On iOS Safari, whenever the keyboard ...
Explore this conversation and more from the webdev community
so pretty much whenever i scroll, i have to run javascript to dismiss the keyboard....
that's the solution
unbelievable
i also i verified that it works
The exact js is
document.activeElement.blur(); on touchmove if and only if the active element is an input field, text area, select etc...