How can I detect mobile browsers without checking HTTP headers?

Question

Before telling me that the question have been asked earlier only with after reading my title, read further.

I would like to know the best way to detect mobile browser without sniffing the headers for the simple reason that this can be modified addons on a desktop's computer.

The reason for this is that I am building a HTML5 Game and I do not want it to be played on a desktop's computer. It will probably end up being played by automated bots if I let this happens.

The only way I can think of is to compare Javascript offsetWidth of document/window and compare it against a list of possibles sizes. But, I believe that in a not so long future, phones and tablets will have similar screen resolution then desktop's computer and I couldn't take them apart.

What are my other options? Of course, Javascript is very welcomed.

Answer 1

If your concern is preventing access from a desktop computer, well, you basically cannot. Headers can be easily forged, beating browser size detection is just a matter of resizing the window... I'd say go with normal user-agent detection and hope for the best.

Answer 2

CSS3 makes it better with media queries. Instead of the if-then-else logic with the device types (User Agents), it allows us to code to the screen size.

Here is good read.

The basic idea being, dynamically adapting to the screen size (and other capabilities!) and also making the design of the website future proof from the ground-up.

Some conceptual examples are HERE

Answer 3

Maybe one thing you could try is to make some sort of "unlock" touch gesture when your game starts up. So for example dragging a circle onto an other or something along those lines, which will:

1. require touch events to be fired by the browser
2. can be slightly different positions / sizes every time so difficult to script.