点击手机/平板电脑，悬停在其他设备（面向未来）

需要一个想法，我陷入了相当难题。我正在构建一个敏感的未来证明网页设计。点击手机/平板电脑，悬停在其他设备（面向未来）

在桌面设备和类似设备上：我有一个悬停的菜单，用来描述隐藏在链接后面的内容，点击导航到新页面。

在移动设备上：我希望触发悬停（因此描述描述）和触摸编号2时触摸事件，然后导航到新页面。

以上是可行的，但没有检查用户代理如何做到这一点，这是我的情况。人们如何去证明上述的未来。

任何伟大的想法都更受欢迎。 :)

来源

2014-08-29 Reborn

你可以试验宽度。如果它低于600，则将'isMobile'设置为true并使用该变量来测试屏幕宽度。虽然为什么没有使用者？您是否在前端公开敏感数据？你为什么在乎？ – 2014-08-29 07:22:57

嗅探用户代理并转到下一个项目。可悲的是，除非它是纯HTML，否则没有真正的未来证明。即使如此...... – Will 2014-08-29 07:25:02

由于显而易见的原因，检查用户代理将是一个问题，因此我希望避免它，并且检查屏幕也是一个问题，因为奇怪大小的触摸设备数量众多。我想如果我可以检查是否它是一个触摸启用设备，我会有点解决我的问题。 – Reborn 2014-08-29 07:28:24

使用Javascript在touchstart/touchend事件中添加一个类。浏览器不会发出这些事件：

的Javascript：

document.querySelector("#myMenu").addEventListener("touchstart", function() { 
    this.classList.add("mobileHovered "); 
}); 
document.querySelector("#myMenu").addEventListener("touchend", function() { 
    this.classList.remove("mobileHovered"); 
});

CSS：

#myMenu:hover, 
#myMenu.mobileHovered { 
    /* CSS styles */ 
}

来源

2014-08-29 07:39:22 CodingIntrigue

完美和简单的解决方案，现在为什么我没有想到这一点？ :) thx allot :) – Reborn 2014-08-29 08:10:26

点击手机/平板电脑，悬停在其他设备（面向未来）

回答

相关问题