检测设备是否为触摸启用和低于一定的屏幕尺寸

Detect if device is touch enabled and below a certain screen size

本文关键字：于一定 屏幕 是否 触摸 启用 检测设备      更新时间：2023-09-26

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

你可以试试

var is_touch_device = 'ontouchstart' in document.documentElement;

另一种检测方法如下:

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

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

要检测屏幕大小(哦，浏览器窗口大小)，您可以使用:

window.screen.availHeight
window.screen.availWidth

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

您可以将modernizr和media查询结合使用:

在modernizr的下载页面上创建一个带有TOUCH EVENT 复选的文件。Modernizr将在您的<body>上包含touch或no-touch类

在你的CSS中，为每个:hover插入.no-touch之前。在下一个示例中，只有宽度大于768px且没有触摸事件的屏幕才会有: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;
    }
}
相关文章：