如何使用 CSS 检测触摸屏设备？

在网站中，检测用户使用的定点设备变得很重要。例如，如果用户使用手指作为指点设备(由于更多的屏幕手指接触区域，在屏幕上的准确性较低)，那么我们应该增加各种元素的大小，如按钮、链接、输入字段等。使用户在使用网站时感到舒适。

可以使用 CSS 媒体查询或使用 JavaScript 轻松检测触摸屏设备。

HTML 本身无法检测触摸屏设备。除了 HTML，我们还需要 CSS 媒体查询。在 CSS 媒体查询中，我们有一个称为指针的功能，用于检测用户使用的指向设备的指向准确性。它有以下 3 个值。

• 指针：无：当设备的输入机制没有指针设备时触发。
• 指针：粗糙：当指针设备的输入机制精度较低时触发。例如，触摸屏。
• 指针：精细：当指针设备的输入机制精度高时触发。例如，鼠标、触控板、手写笔等。

HTML 代码：以下代码检测用户是否使用触摸屏设备。

HTML

  

    

  

    

        This image will only be visible on 
        a touch screen device
    
      
    

  

输出：

• 触摸屏输出：

智能手机输出

• 非触摸屏输出：

从非触摸屏桌面输出

注意：要在智能手机上测试输出，请将上述代码复制到 .html 文件中并将其传输到智能手机，然后使用 Chrome 或 Safari 等任何浏览器打开它。