Detecting “Tablet/Touch Mode” in Edge using JavaScript on Windows 10?

Question

This question was asked before, but the answers are not exactly what I need.

I need to distinguish in Microsoft Edge if it's a tablet or not (Desktop).

1) The following thread: Can you detect "Tablet Mode" in Edge and IE11 using JavaScript on Windows 10?

worked indeed, but I'm afraid that in the next version Microsoft will change the behavior.

How can I be sure that they won't?

Answers with if condition of window.PointerEvent do not work at all, since it's defined in Desktop.

I can't use CSS Media Queries Interaction media features as suggested here: Is there any way to detect if user has launched microsoft edge tablet or desktop browser?

"It worked indeed, but I'm afraid that in the next version Microsoft will change the behavior. how can I be sure that they won't?" You can never be sure. But given that Windows 10 for PCs has just been out for barely a few months, I wouldn't worry about it. — BoltClock, Oct 27 '15 at 16:48
Patrick - For instance with desktop you can do hover with mouse and then you can see tooltip, In tablet the behavior is different (no hover), I have a lot of examples of different behaviors but I think it's not the scope here. — Programmer, Oct 28 '15 at 07:18
This isn't really an answer, but you could start out by assuming that the user has a mouse, and when you detect a "pointerup" event, then switch the behavior to a more touch-friendly mode. — libertyernie, Nov 13 '15 at 18:48
I don't know about win10 and edge, but from experience it is impossible to differentiate a MS Surface with IE 11 from a Laptop with IE 11 equipped with a touch screen. This was a deliberate decision Microsoft made when they first developed this. Not sure if they moved away from this with Edge and Win10 — apokryfos, Sep 09 '16 at 07:59

Paul Sweatte · Answer 1 · 2017-09-28T13:35:25.140

Here are the hardware specific differences in the Edge browser capabilities:

The only differences are due to certain device-specific qualities – for example, codec support may be different on phones due to missing hardware acceleration, and Flash is not supported on Windows 10 Mobile. Because Windows 10 Mobile has a different background model, RTC (Real-Time Communications) APIs are also currently not supported. Finally, Windows 10 Mobile does not support Flash in order to provide a modern, touch-focused, and power-efficient experience appropriate for a mobile device. Because of this, Flash is not supported in Microsoft Edge in Continuum.

To detect RTC capabilities, use the following code:

if (RTCRtpCapabilities)
  {
  initRTC();
  }
function initRTC()
  {
  var recvAudioCaps = RTCRtpReceiver.getCapabilities("audio"); 
  var recvVideoCaps = RTCRtpReceiver.getCapabilities("video"); 
  var sendAudioCaps = RTCRtpSender.getCapabilities("audio");
  var sendVideoCaps = RTCRtpSender.getCapabilities("video"); 
  }

Embedding a Flash movie which uses an ExternalInterface call would be the easiest way to detect Flash.

The properties of the navigator object should be able to distinguish tablet from phone. For example:

navigator.cpuClass

should return x86 for Surface devices, but other for phones.

Also, the user agent changes when casting a phone display to a TV. It goes from:

Microsoft Edge UA (Mobile)

Mozilla/5.0 (Windows Phone 10.0; Android 6.0.1; Microsoft; <Device>) AppleWebKit/<Rev (KHTML, like Gecko) Chrome/<Rev> Mobile Safari/<Rev> Edge/<Rev>

to:

Microsoft Edge UA (Continuum)

Mozilla/5.0 (Windows NT 10.0; ARM) AppleWebKit/<Rev> (KHTML, like Gecko) Chrome/<Rev> Safari/<Rev> Edge/<Rev>

compared to the desktop:

Microsoft Edge UA (Desktop)

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/<Rev> (KHTML, like Gecko) Chrome/<Rev> Safari/<Rev> Edge/<Rev>

References

Detecting “Tablet/Touch Mode” in Edge using JavaScript on Windows 10?

1 Answers1