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)

Answer 3

Using a calc() that depended on the scrollbar thickness seemed to work, but was unreliable at detecting the scrollbar resizing. Just adding it here in case the idea helps.

.metrics-edge-outer {
    position: absolute;
    height: 50px;
    width: 50px;
}

.metrics-edge-1,
.metrics-edge-2 {
    width: 100px;   /* cause bottom scrollbar */
}

.metrics-edge-1 {
    height: calc(50px + 50px - 100% - 2px);
    /* bistable - if scrollbar has thickness then once scrollbar shows then it stays showing - when scrollbar thickness goes to zero due to tablet mode then height shrinks to 48px (and scroll event happens) */
}

.metrics-edge-2 {
    height: calc(200% - 50px + 2px);
    /* bistable - if scrollbar has zero thickness then once area is scrollable it stays is scrollable  - if scrollbar thickness goes to 17px due to non-tablet mode then height goes to less than 48px  (and scroll event happens) */
}

And the code to go with it (not even syntax checked because edited from framework):

var tabletModeNode;
function detectTabletMode() {   // Also see http://www.backalleycoder.com/resize-demo.html
    var innerDiv = core.div({
        className: (getScrollbarThickness() > 0) ? 'metrics-edge-1' : 'metrics-edge-2'
    });
    tabletModeNode = core.div({
        className: 'metrics-edge-outer',
        tabIndex: -1
    }, [innerDiv]);
    this.node.appendChild(tabletModeNode);
    redetectTabletMode();
    tabletModeNode.addEventListener('scroll', function() {
        if (!tabletModeNode.scrollTop) {
            alert('on tablet mode');
            redetectTabletMode();
        }
    });
}

var tabletTimer;
function redetectTabletMode: function() {
    tabletModeNode.style.overflow = 'scroll';
    tabletModeNode.scrollTop = 1;
    clearTimeout(tabletTimer);
    tabletTimer = setTimeout(function() {   // Wait until after CSS rules have run (and inner div is bigger than outer div)
        tabletModeNode.style.overflow = 'auto';
    }, 1000);
}