0

Microsoft edge browser is returning the same user agent for both windows 10 tablet and desktop. So please help me in differentiating micosoft edge tablet and desktop browsers through any javascript features or useragent detection or any other way.

Note: Normally we differentiate tablet and desktop browsers by pointer events. tablet supports pointer events while desktop doesnt support. In windows 10 even desktop is supporting pointer events

Willi Mentzel
  • 27,862
  • 20
  • 113
  • 121
sridhar..
  • 1,945
  • 15
  • 19
  • What problem are you really trying to solve? You should generally be using feature detection, not browser or device detection since features in a given browser change all the time. – jfriend00 Aug 03 '15 at 06:25
  • Hi . I just wanted to know if the user is viewing my website from tablet edge browser or desktop edge browser . I could not differentiate them even by feature detection – sridhar.. Aug 03 '15 at 06:53
  • 1
    There is no longer a hard distinction between a tablet and a desktop or the software that runs on them. You can have a computer that sits on a desk with a keyboard where the screen pops out of a cradle and can be carried like a tablet. You should probably forget about trying to record a distinct "desktop" vs. "tablet" these days. You can record whether the device has touch capabilities, what the screen resolution is, whether the screen can change orientation, what OS it is running, etc... which are all relevant features that can be detected. – jfriend00 Aug 03 '15 at 07:04
  • For desktop and tablet , even window.orientation is returning false and window.devicePixelRatio=1 for both of them. Pointer events are supported by both. – sridhar.. Aug 03 '15 at 11:13

3 Answers3

3

Unlike Windows 8/8.1 there is only one Microsoft Edge browser, rather than an “immersive” touch friendly browser and regular desktop win32 app. As such you can’t detect the difference with the UA string, as there is no difference.

However, if your use-case is to give touch friendly layout for touch devices (tablets and convertibles, 2-in-1s, etc) and a more compact layout for mouse and keyboard only users, you can use feature detection in CSS for this.

For this you can use CSS Media Queries Interaction media features.

If you want to detect that there is a touch screen:

@media (pointer: coarse) { 
    ...styles for touch screen...
}

If you want to detect that the user can’t hover (a common issue on touch screens):

@media (hover: none) {
   ... styles ...
}

It is however important to point out that this reports the primary pointing device. In machines such as convertibles where there can be a trackpad/mouse and touch screen, it may report the values for a touch screen.

See the spec for details.

David Storey
  • 29,166
  • 6
  • 50
  • 60
0

Testing user-agent for Touch doesn't work for you?

Borsunho
  • 1,127
  • 7
  • 21
0

I have found you can use JavaScript to detect if in Tablet mode (although the code probably needs to only run if Edge is in the user-agent, and Windows Phone is not in the user-agent?) - see https://stackoverflow.com/a/32601200/436776

This works in Edge, but doesn't work in IE11.

A similar technique works to reliably detect Metro/Modern on Windows 8/8.1.

Community
  • 1
  • 1
robocat
  • 5,293
  • 48
  • 65