你可以检测和QUOT;平板模式＆QUOT;在Edge和IE11在Windows 10使用JavaScript？ [英] Can you detect "Tablet Mode" in Edge and IE11 using JavaScript on Windows 10?

问题描述

我想使我的UI动态地更改为多点触控友好的布局，当用户接通平板模式，并切换回我们的桌面布局，如​​果他们把平板模式关闭的。

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.

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

That requires (1) detecting tablet mode in JavaScript (2) detecting the on/off change of tablet mode.

我preFER纯JavaScript和DOM（不是jQuery的，Modernizr的等等）。

I prefer pure JavaScript and DOM (not jQuery, Modernizr etc).

原因：我们有一个高密度（台式机等）的用户界面，这是我们不能轻易只是改变。我想补充的间距更友好的触摸时平板模式。这是相同的Windows任务栏10图标增加之间微胖在平板模式时（presumably其他Windows 10应用程序将这样的行为？！）

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?!)

编辑：我做了一些研究视，因为它看起来像零宽度滚动条可用于检测平板模式（或地铁）的伎俩。 http://pastebin.com/ExPX7JgL

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

推荐答案

平板模式：滚动条宽度为边缘0。
没有平板模式：滚动条的宽度是不是在边缘零

Tablet mode: scrollbar width is 0 in Edge. Not tablet mode: scrollbar width is not zero in Edge.

这里工作纯JavaScript code 。

Working pure JavaScript code here.

这适用于边缘（IE12）在Windows 10，但不是Internet Explorer 11可能模式间切换时会出现一个调整大小事件，但并不可靠（我认为这不，如果页面比窗口小。我我听到的话，任何人发现的技术，使其100％可靠）非常感兴趣。

This works for Edge (IE12) on Windows 10, but not Internet Explorer 11. A resize event may occur when changing between modes, but not reliably (I think it doesn't if the page is smaller than the window. I am very interested to hear if anyone finds a technique to make it 100% reliable).

注意，滚动条的宽度可以是其他原因零（iOS版，Android版，Windows手机，OSX Safari浏览器，或者如果 -ms溢流式：无（其中包括）原因）。 Modernizr的3具有检测是否使用零宽度滚动一个hiddenscrollbar特征检测。

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.

这篇关于你可以检测和QUOT;平板模式＆QUOT;在Edge和IE11在Windows 10使用JavaScript？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！