Mobile screen real estate

By Raúl on Dec 4, 2022
Image courtesy of unsplash

A designer work mate ask how much screen space is left after soft keyboard appears on a small screen phone.

It’s not a unique number neither a precise one. I can offer an estimate derived from Chrome dev tools emulating one Android device. You number would be: 264

So, assuming a 360 x 640 phone there’s quite a few phones that can fall into that category depending on their Device-Pixel ratio. If we consider the popular 3x DPR you can see here some of those phones :

/assets/images/blog/posts/ScreenRealEstateKeyboard/Untitled.png

Now, among that list I am gonna use the LG Nexus because (being Google) is the only one that being 360x640 at 3.0 DPR allows you to emulate the soft keyboard on the Chrome Dev Tools.

/assets/images/blog/posts/ScreenRealEstateKeyboard/Untitled%201.png

So from the original 640 px height Android takes 25px for upper status bar and 48px for bottom navigation bar. Check those here. So our actual screen height real estate is 567px.

Now, when Android action bar activates it took another bit. According to Android Cheat Sheet it should be 48px but on the DevTools emulator it takes 55px.

That leave us with an emulated viewport 512px tall. Finally when soft keyboard is there we end-up with 248px. So the estimated and derived keyboard height is: 264px

/assets/images/blog/posts/ScreenRealEstateKeyboard/Untitled%202.png

2024. Personal website built with Astro & Streamline.