Can you detect "Tablet Mode" in Edge and IE11 using JavaScript on Windows 10?

Question

I am thinking of making my UI to dynamically change to a more touch-friendly layout when the user switches "Tablet Mode" on, and switch back to our "desktop" layout if they turn Tablet Mode off.

That requires (1) detecting tablet mode in JavaScript (2) detecting the on/off change of tablet mode.

I prefer pure JavaScript and DOM (not jQuery, Modernizr etc).

Reason: We have a high density (desktop like) user interface, which we can't easily just change. I wish to add spacing to be more touch friendly when in "Tablet mode". This is the same as the Windows 10 taskbar adds extra padding between icons when in Tablet mode (presumably other Windows 10 apps will act this way?!)

Edit: I did some viewport research, as it looks like the zero width scrollbar is the trick for detecting Tablet Mode (or Metro). http://pastebin.com/ExPX7JgL

Answer 1

Tablet mode: scrollbar width is 0 in Edge. Not tablet mode: scrollbar width is not zero in Edge.

Working pure JavaScript code here.

This works for Edge (IE12) on Windows 10, but not Internet Explorer 11.

A reliable way to detect that the tablet mode has changed is here.

Note that scrollbar width can be zero for other reasons (iOS, Android, Windows Phone, Safari OSX, or if -ms-overflow-style: none, amongst other reasons). Modernizr 3 has a hiddenscrollbar feature detection which detects if zero width scrollbars used.

Note that Edge scrollbars act and display differently if you are using touch, rather than using a mouse/touchpad. (You can even get both thin and old-school styles of scrollbar showing at once if you scroll then change into tablet mode quickly)! Beware that I suspected the Edge debugger of interfering with scrollbar detection (but it probably due to me changing between touch and touchpad).

Answer 2

I would discourage you from doing platform specific things like that.
Even in Windows 10 apps, the general design guideline is to change the UI based on view size, and change interactions based on input device, but not the actual view.

You should use pointer events instead.

It's a W3C standard that receives events from stylus/mouse/touch. It has a pointer-type property you could use to detect which one is interacting with your site.
(Supported in Firefox / Opera / IE, and soon Chrome)