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
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.
Testing user-agent
for Touch
doesn't work for you?
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.