Detect whether browser has keyboard/arrow keys in web page

Question

I have a full-screen game in HTML+JavaScript, which uses the arrow keys as primary controls. This cannot be used on keyboardless Android devices (I haven\'t tested on iOS),

Answer 1

rather than displaying the on-screen keyboard by default, add a button to toggle the display of the on-screen keyboard.

It might also be prudent to give the on-screen keyboard the ability to be resized.

Edit to answer question:

Keyboard should be hidden by default if most of your users are going to be on a computer,

Visible by default if most of your users are going to be on a mobile device.

Answer 2

If you have only arrows (left/right/up/down) you might consider adding touch-events inside the game field? This would not take up space obviously as it is layered on top of the game, so it could be 'always on'.

• A computer user would not even know it is there, though he/she could use them to play your game with a mouse I guess.

• The touch-device user on the other hand can much more easily use the "areas" (mid top, mid left, mid bottom and mid right for instance) because of .. well.. touching instead of using a mouse.

This might need some explaining, as you probably would not want the points to be visible to the user, but it feels like a valid option.

Even if you have 4 buttons and a 'fire', you could do this, for instance by adding a 'middle' section.