Recently I have been working on a custom keyboard extension.
I wanted it to be of the same size of the original iOS keyboard. I noticed that almost all of the devices have different keyboard heights and I thought that affected the way the keyboard appeared. But here’s the plot twist: the view that contains the letters is always of the same size!
This means that the height difference comes from the bottom safe area.
The universal height of the letters view on iPhone is of 216 points in portrait and 162 points in landscape. On iPad it’s 264 points in portrait and 352 points in landscape (these heights don’t include top the number row).
To be honest, I suspect some devices vary of +10 points but I’m still trying to figure this all out!
As regards the full values, since I couldn’t find a list of them all, I decided to calculate them by myself.
For each device I calculated the height in portrait and landscape mode both with the toolbar on and off.
Note that you’ll only be using those values when you’ll need to know the dimension of the keyboard before you layout the view or for graphic purposes.
If you need to know the height of the keyboard after you layout the view then scroll down to the second part of the article.
This table contains all of the official devices’ dimensions in points.
As regards the iPads, I only calculated the heights of the most recent models because there are too many sizes and I didn’t really need them. For those ones I set a generic height. However after this tutorial you’ll be able to calculate whichever keyboard height by yourself.
Here’s the code to get the height in your project:
Note that I edited this story to make it more readable. This code is generic and returns the average heights. However if you wish to have a more precise code check this link. The code there will always return the right height for your device.
Again, only use this technique if you need to know the size of the keyboard before you layout the view or for graphic purposes.
If you need to calculate the onscreen keyboard height after you layout the view, then you should use this code (I used it to calculate the previous dimensions):