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

📅  最后修改于: 2021-10-29 04:27:04             🧑  作者: Mango

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

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

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

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

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

HTML



  

    

  

    

        This image will only be visible on          a touch screen device     

              


输出:

  • 触摸屏输出:

智能手机输出

  • 非触摸屏输出:

从非触摸屏桌面输出

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