For my most recent little game I noticed that touch input does not work that well with this type of game, but on-screen keyboards of mobile devices do not provide arrow keys, nor can they be forcefully opened without focusing input fields.
So, when played on a device with touch input (smartphone, tablet, etc.), users should be provided with dedicated on-screen keys — CSS to the rescue!
First try — Size dependent on-screen keys
In a first, naive approach I decided to generally display touch controls on smaller screens. I went with something like the following:
.on-screen-keys {
display: none;
}
@media (max-width: 768px) {
.on-screen-keys {
display: inline-flex;
}
}
However, screen size is not the best criteria to determine whether to display on-screen keys.
Next try — Pointer device
A better approach would be to determine whether we’re dealing with a touch device or not. A little research revealed the CSS pointer media feature, a way to determine how accurate the primary pointing device is.
Smartphones, tablets etc. which are primarily using touch input are identified as coarse
input with limited accuracy, a distinction from fine
input via mouse / keyboard.
.on-screen-keys {
display: none;
}
@media (pointer: coarse) {
.on-screen-keys {
display: inline-flex;
}
}
Demo
I put together a little sample on CodePen. Don’t expect to see anything when visiting it from a device with pointer: fine
, but when viewed on e.g. a tablet, you should see the same buttons as used in my game.
Conclusion
Never underestimate CSS!
Top comments (0)