Question

我正在考虑让用户在切换＆＃34; Tablet Mode＆＃34;时，让我的UI动态更改为更友好的触摸布局。在，然后切换回我们的桌面＆＃34;布局如果他们关闭平板电脑模式。

这需要（1）在JavaScript中检测平板电脑模式（2）检测平板电脑模式的开/关变化。

我更喜欢纯JavaScript和DOM（不是jQuery，Modernizr等）。

原因：我们拥有高密度（类似桌面）的用户界面，我们无法轻易改变。我希望在＆＃34;平板电脑模式＆＃34;中添加间距以使触摸更友好。这与Windows 10任务栏在平板电脑模式下在图标之间添加额外填充相同（大概是其他Windows 10应用程序会以这种方式运行？！）

编辑：我做了一些视口研究，因为看起来零宽度滚动条是检测平板电脑模式（或Metro）的技巧。 http://pastebin.com/ExPX7JgL

Answer 1

平板电脑模式：Edge中的滚动条宽度为0。不是平板电脑模式：Edge中的滚动条宽度不为零。

使用纯JavaScript代码here。

这适用于Windows 10上的Edge（IE12），但不适用于Internet Explorer 11.

检测平板电脑模式已更改的可靠方法是here。

请注意，由于其他原因（iOS，Android，Windows Phone，Safari OSX或-ms-overflow-style: none等原因，滚动条宽度可能为零）。 Modernizr 3具有hiddenscrollbar特征检测功能，可检测是否使用零宽度滚动条。

请注意，如果您使用触摸而不是使用鼠标/触控板，则边缘滚动条的行为和显示方式会有所不同。（如果您滚动然后快速更改为平板电脑模式，您甚至可以同时显示精简和旧式滚动条样式）！请注意，我怀疑边缘调试器会干扰滚动条检测（但可能是因为我在触摸和触摸板之间切换）。

Answer 2

使用依赖于滚动条厚度的calc（）似乎可行，但在检测滚动条大小方面并不可靠。只是在这里添加它，以防主意有所帮助。

.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) */
}

以及附带的代码（甚至没有检查语法，因为是从框架编辑的）：

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);
}

你能检测到平板模式＆＃34;在Edge和IE11中使用Windows 10上的JavaScript？

2 个答案: