你能探测到吗；“平板电脑模式”；在Edge和IE11中在Windows10上使用JavaScript？

我正在考虑，当用户打开“平板电脑模式”时，让我的UI动态地改变为一种更友好的触摸布局，如果他们关闭平板电脑模式，则切换回我们的“桌面”布局

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

我更喜欢纯JavaScript和DOM（而不是jQuery、Modernizer等）

原因：我们有一个高密度的（类似桌面的）用户界面，我们不能轻易改变它。我希望在“平板电脑模式”中添加间距，使其更便于触摸。这与在平板电脑模式下Windows 10任务栏在图标之间添加额外的填充相同（想必其他Windows 10应用程序也会这样做？！）

---

编辑：我做了一些视口研究，因为看起来零宽度滚动条是检测平板电脑模式（或Metro）的诀窍

我不鼓励您做类似于平台的事情。
即使在Windows 10应用程序中，一般的设计准则也是根据视图大小更改UI，并根据输入设备更改交互，而不是实际视图

你应该改用

它是一个W3C标准，从触控笔/鼠标/触摸屏接收事件。它有一个属性，您可以使用它来检测哪个站点正在与您的站点交互。

---

（Firefox/Opera/IE等支持）

平板电脑模式：边缘的滚动条宽度为0。 非数字化仪模式：边缘中的滚动条宽度不为零

使用纯JavaScript代码

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

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

请注意，由于其他原因（iOS、Android、Windows Phone、Safari OSX或if

-ms overflow style:none

，以及其他原因），滚动条宽度可以为零。Modernizr 3有一个hiddenscrollbar功能检测，用于检测是否使用了零宽度滚动条

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

使用依赖于滚动条厚度的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) */
}

以及与之配套的代码（甚至不检查语法，因为是从框架编辑的）：

---

A） 检测用户代理，B）通过CSS@media querys检测屏幕大小平板电脑和桌面电脑模式之间的UA字符串不会改变。我不确定最新版本的WinJS是否提供了这样的功能，更不用说本机JavaScript API了。@remus许多平板电脑的分辨率与笔记本电脑或桌面电脑相同。我们希望为桌面用户提供桌面UI，为平板电脑用户提供触摸UI。我不想仅仅因为用户的笔记本电脑（或带有触摸屏的PC）上有触摸屏就向用户展示触摸UI。我们还应该在UI上提供桌面/移动交换机，但我希望默认为最可能的选项。我大体上同意您的意见，但不适用于我们的用例。根本的问题是，如何可靠地知道用户是否在使用平板电脑，是否需要触摸界面？苹果（iPad是平板电脑，OSX是台式机）操作简单。我们的绝大多数用户都是桌面用户，我们希望展示现有的用户界面。我们不希望仅仅因为用户有带触摸屏（或绘图平板电脑等）的笔记本电脑或台式电脑，就向用户展示“触摸”界面。我举另一个例子，我有一台联想瑜伽电脑，它可以在普通或平板电脑模式下运行，屏幕大小在这两种模式之间没有变化，但在平板电脑模式下，html工具提示“标题属性”不起作用，它们在屏幕模式下起作用，因此我需要根据模式而不是屏幕大小修改我的UI。

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