Can You Detect "tablet Mode" In Edge And Ie11 Using Javascript On Windows 10?

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 Ta

Solution 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).

Solution 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)

Solution 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;
functiondetectTabletMode() {   // Also see http://www.backalleycoder.com/resize-demo.htmlvar 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;
functionredetectTabletMode: 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);
}