你能检测到“平板电脑模式"吗?在 Windows 10 上使用 JavaScript 在 Edge 和 IE1

问题描述

我正在考虑让我的 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.

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

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

我更喜欢纯 JavaScript 和 DOM(不是 jQuery、Modernizr 等).

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

原因:我们有一个高密度(类似于桌面)的用户界面，我们不能轻易地改变它.我希望在平板电脑模式"下添加间距以使触摸更友好.这与 Windows 10 任务栏在平板电脑模式下在图标之间添加额外的填充相同(可能其他 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?!)

我做了一些视口研究，因为看起来零宽度滚动条是检测平板电脑模式(或 Metro)的技巧.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

推荐答案

平板模式:Edge 中滚动条宽度为 0.非平板模式:Edge 中的滚动条宽度不为零.

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

工作纯 JavaScript 代码这里.

Working pure JavaScript code here.

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

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.

请注意，由于其他原因(iOS、Android、Windows Phone、Safari OSX 或 -ms-overflow-style: none 等原因)，滚动条宽度可能为零.Modernizr 3 有一个隐藏滚动条功能检测，可以检测是否使用了零宽度滚动条.

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.

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

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

这篇关于你能检测到“平板电脑模式"吗?在 Windows 10 上使用 JavaScript 在 Edge 和 IE11 中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！