Question

我想激活/禁用：悬停取决于设备，我想最好的方法是检查设备是否启用触摸并检测屏幕尺寸，因为最新的笔记本电脑也有触摸屏。有没有办法用javascript / jquery做到这一点？

Answer 1

你可以尝试

var is_touch_device = 'ontouchstart' in document.documentElement;

另一种检测方式如下：

function is_touch_device() {
  return !!('ontouchstart' in window);
}

Answer 2

如果这是一个选项，Modernizr将能够检测触摸（除了目标浏览器/设备的一堆其他属性）：http://modernizr.com/它将在html标记上放置一个适当的类，你可以检测到。

要检测屏幕大小（哦，浏览器窗口大小），您可以使用：

window.screen.availHeight
window.screen.availWidth

Answer 3

var touchDevice = (typeof (window.ontouchstart) !== 'undefined') ? true : false;

Answer 4

您可以合并modernizr和媒体查询：

在modernizr的下载页面上，您可以创建一个触摸事件已选中的文件。 Modernizr将在您的touch

中加入no-touch或<body>课程

在:hover之前的每个.no-touch插页的CSS中。在下一个示例中，只有宽度大于768像素且没有触摸事件的屏幕才会显示:hover。

/* CSS */
a{
    color:#DD0000; /* Dark red */
    text-decoration:none;
}
@media screen and (min-width: 768px) {
    .no-touch a:hover {
        color:#FF0000; /* red */
        text-decoration:underline;
    }
}

检测设备是否已启用触摸且低于特定屏幕尺寸

4 个答案: