您可以在 Windows 10 上使用 JavaScript 在 Edge 和 IE11 中检测 "Tablet Mode" 吗?
Can you detect "Tablet Mode" in Edge and IE11 using JavaScript on Windows 10?
我正在考虑让我的 UI 在用户打开 "Tablet Mode" 时动态更改为对触摸更友好的布局,并在用户打开 "desktop" 布局时切换回我们的 "desktop" 布局关闭平板电脑模式。
这需要 (1) 在 JavaScript 中检测平板电脑模式 (2) 检测 on/off 平板电脑模式的变化。
我更喜欢纯 JavaScript 和 DOM(不是 jQuery、Modernizr 等)。
原因:我们有一个高密度(类似于桌面)的用户界面,我们不能轻易改变它。我希望在 "Tablet mode" 中添加间距以使触摸更友好。这与 Windows 10 任务栏在平板电脑模式下在图标之间添加额外的填充相同(大概其他 Windows 10 应用程序将以这种方式运行?!)
编辑:我做了一些视口研究,因为看起来零宽度滚动条是检测平板电脑模式(或 Metro)的技巧。 http://pastebin.com/ExPX7JgL
我不鼓励你做那样的特定于平台的事情。
即使在 Windows 10 个应用程序中,一般设计准则也是根据视图大小更改 UI,并根据输入设备更改交互,而不是实际视图。
您应该改用 pointer events。
这是一个从 stylus/mouse/touch 接收事件的 W3C 标准。它有一个 pointer-type 属性,您可以使用它来检测哪个正在与您的站点进行交互。
(在 Firefox / Opera / IE 中支持,很快 Chrome)
平板电脑模式: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 具有隐藏滚动条功能检测功能,可检测是否使用了零宽度滚动条。
请注意,如果您使用触摸而不是使用 mouse/touchpad,边缘滚动条的行为和显示会有所不同。 (如果您滚动然后快速切换到平板电脑模式,您甚至可以同时显示薄型和老式风格的滚动条)!请注意,我怀疑 Edge 调试器干扰了滚动条检测(但这可能是因为我在触摸和触摸板之间切换)。
使用依赖于滚动条粗细的 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);
}
我正在考虑让我的 UI 在用户打开 "Tablet Mode" 时动态更改为对触摸更友好的布局,并在用户打开 "desktop" 布局时切换回我们的 "desktop" 布局关闭平板电脑模式。
这需要 (1) 在 JavaScript 中检测平板电脑模式 (2) 检测 on/off 平板电脑模式的变化。
我更喜欢纯 JavaScript 和 DOM(不是 jQuery、Modernizr 等)。
原因:我们有一个高密度(类似于桌面)的用户界面,我们不能轻易改变它。我希望在 "Tablet mode" 中添加间距以使触摸更友好。这与 Windows 10 任务栏在平板电脑模式下在图标之间添加额外的填充相同(大概其他 Windows 10 应用程序将以这种方式运行?!)
编辑:我做了一些视口研究,因为看起来零宽度滚动条是检测平板电脑模式(或 Metro)的技巧。 http://pastebin.com/ExPX7JgL
我不鼓励你做那样的特定于平台的事情。
即使在 Windows 10 个应用程序中,一般设计准则也是根据视图大小更改 UI,并根据输入设备更改交互,而不是实际视图。
您应该改用 pointer events。
这是一个从 stylus/mouse/touch 接收事件的 W3C 标准。它有一个 pointer-type 属性,您可以使用它来检测哪个正在与您的站点进行交互。
(在 Firefox / Opera / IE 中支持,很快 Chrome)
平板电脑模式: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 具有隐藏滚动条功能检测功能,可检测是否使用了零宽度滚动条。
请注意,如果您使用触摸而不是使用 mouse/touchpad,边缘滚动条的行为和显示会有所不同。 (如果您滚动然后快速切换到平板电脑模式,您甚至可以同时显示薄型和老式风格的滚动条)!请注意,我怀疑 Edge 调试器干扰了滚动条检测(但这可能是因为我在触摸和触摸板之间切换)。
使用依赖于滚动条粗细的 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);
}