2

I'm making a game that has 2 controls, left and right. On desktop those are the left and right cursor keys. On a machine without a keyboard or a machine primarily interacted with via touch screen I need to show buttons the user can press with their fingers.

Is there a way to detect when it's appropriate to display these touch buttons and when it's not?

solutions considered:

  • check for iPhone/iPad/Android

    That covers most phones and tablet but of course it will be wrong on some other brands

  • use css media queries hover and pointer

    AFAIK these won't help. A phone probably has hover: none and pointer: course but what about an iPad with a stylus. It should allow both hover:hover and pointer:fine making it indistinguishable from a desktop.

  • check by size

    Seems flaky. Tablets have pretty large sizes. Often as large as laptops.

  • check for touch support

    isTouchDevice = "ontouchstart" in window;

    returns true on many Windows devices with touch screens

gman
  • 100,619
  • 31
  • 269
  • 393
  • Why not just test for [*touch support*](https://stackoverflow.com/search?q=%5Bjavascript%5D+detect+touch+support)? – RobG Jul 05 '19 at 05:54
  • This is explained [here](https://stackoverflow.com/questions/11381673/detecting-a-mobile-browser) beautifully. What I'd do in this situation is, check for `orientation` property on `window` object. _since smartphones usually support this property and desktop browsers don't._ – Muhammad Usman Jul 05 '19 at 05:55
  • @RobG, doesn't touch support return true on the majority of windows desktops/laptops that have touch screens? – gman Jul 05 '19 at 06:01
  • @GeorgeBailey, isn't `orientation` [deprecated](https://developer.mozilla.org/en-US/docs/Web/API/Window/orientation)? – gman Jul 05 '19 at 06:02
  • Nothing wrong with showing touch controls on a laptop that does have a touch screen. Could include an option in the settings to disable them. – mullac Jul 05 '19 at 06:04
  • 1
    @Callum, it's arguable it would not be a good user experience to clutter the user's display with touch controls on a desktop computer just because it has a touch screen. I certainly wouldn't expect most games to show touch controls on a desktop computer. I can imagine having the option to display them but I'd still expect the default would be for them to be off on desktop, on on phone/tablet. – gman Jul 05 '19 at 06:10
  • 1
    @gman—detecting touch is problematic, but it's likely more reliable than screen size, orientation, etc. Touch doesn't just mean "mobile", and why wouldn't a desktop user with touch support want to use it? Why wouldn't an iPad user with attached keyboard want to use touch and not the keyboard? Maybe offer touch or cursor based on detection, but let the user change if they want. – RobG Jul 05 '19 at 06:15
  • @RobG, it sounds like you'd expect Call of Duty, Fornite, etc, to clutter the user's screen with on screen controls on a gaming PC and force the user to dig into settings to turn them off just because their PC has a touch screen. That doesn't sound like a good user experience to me. It sounds like 1000s of messages of people asking how to remove the controls and having to be told Settings->UI->HideTouchControls. Ideally for the majority of users the page does the right thing for their situation. That means by default no touch controls on desktop PCs and laptops. – gman Jul 05 '19 at 06:20
  • My point is that you shouldn't set the user experience definitively based on the platform. How you provide the settings to change from keys to touch is up to you, there might be an alternative to hunting for them in settings. E.g. when they first use your game you might give them the default based on whatever detection, but also offer the option to change it on the screen. Once they've chosen, stick with that until they change it (in setting somewhere). – RobG Jul 05 '19 at 06:26
  • @RobG, Agreed letting the user choose is good, that doesn't then answer the question which is how to detect which is the appropriate default. Basically show touch controls by default on phones/tablets, don't show them on desktops/laptops. How to know which is which. Anything else is a bad user experience for most users. Native apps know by virtue of having been built for that platform. an iOS/Android app will default to showing touch controls, a Windows/MacOS/Linux app will default to not showing touch controls. Just want to do the same on a web page. – gman Jul 05 '19 at 06:29
  • "*…that doesn't answer the question…*". Yep, that's why it's a comment. It's just a suggestion of how you might deal with it. Obviously not a good one in your opinion, which is fine. ;-) – RobG Jul 05 '19 at 06:46

0 Answers0