您能否在 Windows 10 上使用 JavaScript 在 Edge 和 IE11 中检测“平板电脑模式”？

Question

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

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

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

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

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

Answer 1

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

在这里运行纯 JavaScript 代码。

这适用于 Windows 10 上的 Edge (IE12)，但不适用于 Internet Explorer 11。

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

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

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