⌨️ Keeping Buttons Visible When the Keyboard Pops Up
One of the most common problems on mobile forms is a submit button or input field getting pushed off-screen the moment the keyboard appears. A keyboard typically takes up 35-45% of the screen height, and if the UI isn't designed with that in mind, users end up scrolling every single time just to reach the button.
This tool takes your screen height and keyboard type (text, numeric, or email) and calculates the estimated keyboard height along with the safe area left above it. A numeric keypad is shorter than a full text keyboard, so it uses roughly 35% of the screen, while a standard text keyboard uses about 42%.
If the resulting safe area comes out under 100px, your button is sitting in a very tight space — consider auto-scrolling the screen when an input is focused, or moving the button higher up. iOS's predictive text bar can eat into that space further, so it's worth double-checking on a real device.
Frequently Asked Questions
Yes, actual height varies slightly by device and OS version. This calculator uses a common ratio relative to screen height to give you a safe, approximate estimate.
On iOS, the predictive text bar can take up an extra 40px or so. Add a bit more margin, or test on a real device to be sure.
Modern browsers can detect the actual keyboard height with the VisualViewport API. If you need to support older browsers too, design with extra margin around this calculator's estimate.