如何使用媒体查询或 JavaScript 可靠地检测非触摸屏设备？

使用媒体查询识别非触摸屏设备

简介：

确定设备是否支持触摸屏至关重要用于增强 Web 开发的用户体验。媒体查询提供了一种根据设备功能调整内容和功能的便捷方法。本文深入研究了检测非触摸屏设备的最安全媒体查询技术，并探索了替代解决方案。

媒体查询解决方案：

CSS4 媒体查询草案引入了创新“指针”功能可查询鼠标等指点设备的可用性和精度。它提供了三个可能的值：

• none:表示不存在指点设备。
• coarse:表示带有有限的指点设备精度。
• fine: 表示精确的定点设备。

使用此功能，您可以实现如下媒体查询：

@media (pointer:coarse) {
    /* Code to adjust interface for coarse pointing devices */
}

浏览器兼容性：

截至 2013 年 1 月，Windows 上的 Chrome 支持“指针”媒体查询，但 iOS 或 iOS 6 上的 Safari 不支持。

替代解决方案： JavaScript

如果不支持媒体查询，您可以考虑 JavaScript 解决方案，例如以下：

if (!window.Touch) {
    // Code to handle non-touchscreen scenarios
}

结论：

CSS4 中的“指针”媒体查询提供了一种检测非触摸屏设备的可靠方法。但是，应考虑浏览器兼容性。作为替代方案，可以采用“!window.Touch”等 JavaScript 解决方案来实现相同的结果。

以上是如何使用媒体查询或 JavaScript 可靠地检测非触摸屏设备？的详细内容。更多信息请关注PHP中文网其他相关文章！