Detecting mobile (and other) capabilities

[grelf]

If you search for how to detect mobile devices by JavaScript you will find confusing information such as looking for the string "Mobi" in the browser identifier, and other unreliable stuff. In the past people checked screen size but that no longer works because some mobile devices have huge numbers of pixels.

Even the usually reliable Mozilla Developer Network pages are contradictory on trying to detect touch screens. They have an article from 2011 which says to check whether the global window object has a property called ontouchstart (except that for Internet Explorer look at navigator.msMaxTouchPoints) but a recently updated (2019) page about TouchEvent (link below) says ontouchstart is still only an experimental proposal, not in the official specification of TouchEvent. So we cannot rely on browsers using it.

I came to realise that in searching for "how to detect mobile" I was really asking the wrong question (as are many others). What really matters for my programs is whether the user has a keyboard (and if not, perhaps check for mouse or touch screen). As HTML5/JavaScript programmers (what this site is about) we do not have access to the internal system of the device we are running on, to check its hardware, so how can we do this?

Here is my scheme. If a keyboard event occurs we know there is a keyboard. Similarly a mouse or touch event will confirm that the user has other capabilities. So in the constructor of the main program object do the following.

    this.keyable = false; // Until proven otherwise
    this.mouseable = false;
    this.touchable = false;
    var canvas = document.getElementById ("canvasId"); // Or whatever the id is
    canvas.addEventListener ("keydown", handleKeydown, false);
    canvas.addEventListener ("mousedown", handleMousedown, false);
    canvas.addEventListener ("touchstart", handleTouchstart, false);
    
Then if any of those handlers is ever invoked you can set the corresponding boolean to true. For example (if we assume the global program object is called main):

    function handleKeydown (ev)
    {
      if (!main.keyable)
      {
        main.keyable = true; // There is a keyboard
        main.adjustScreenLayout (); // As necessary
      }
      // ... Go on to handle the key supplied in ev
    }
    
Note that we do not want to adjust the layout every time an event comes in, only when the boolean first changes state.
    
There is a potential problem though. If the user of a mobile device manages to invoke the onscreen keyboard it will generate keyboard events, fooling us. Our HTML5 game will not normally provide any way for the user to do this because we do not have access to the system level. However, if our HTML includes text input fields they would spoil things, so there must not be any such fields in the page. I think there is no way to find out whether key events come from a real or virtual keyboard.

I have verified that my Surface Book only fires touch events from the screen, not from the touch pad. The latter fires mouse events. So detecting touch events does seem to indicate a touch screen and maybe that is all I need. If I detect a touch event I will assume that touch is what the user wants to use, regardless of whether there is a physical keyboard, and I should present the appropriate user interface layout.

See also https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent (and linked pages)
That page shows that InternetExplorer and Safari (desktop) have no support for TouchEvent. That does not break my proposal above. It says that Safari on mobile does fully support TouchEvent.