scss 使用CSS检测触摸设备

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了scss 使用CSS检测触摸设备相关的知识,希望对你有一定的参考价值。

@media (hover: hover) {
    /* main device can hover */
}

@media (hover: none) {
    /* main device can't hover */
}

@media (pointer: coarse) {
    /* ... */
}

@media (pointer: fine) {
    /* ... */
}

@media (pointer: none) {
    /* ... */
}

/* Put it all together */

/* smartphones, touchscreens */
@media (hover: none) and (pointer: coarse) {
    /* ... */
}

/* stylus-based screens */
@media (hover: none) and (pointer: fine) {
    /* ... */
}

/* Nintendo Wii controller, Microsoft Kinect */
@media (hover: hover) and (pointer: coarse) {
    /* ... */
}

/* mouse, touch pad */
@media (hover: hover) and (pointer: fine) {
    /* ... */
}

/* at least one input mechanism of the device includes a pointing device of limited accuracy. */
@media (any-pointer: coarse) {
    /* ... */
}

/* at least one input mechanism of the device includes an accurate pointing device. */
@media (any-pointer: fine) {
    /* ... */
}

/* the device does not include any pointing device. */
@media (any-pointer: none) {
    /* ... */
}

/* one or more available input mechanism(s) can hover over elements with ease */
@media (any-hover: hover) {
    /* ... */
}

/* one or more available input mechanism(s) can hover, but not with ease (for example simulating the hovering when performing a long touch) */
@media (any-hover: on-demand) {
    /* ... */
}

/* one or more available input mechanism(s) cannot hover or there are no pointing input mechanisms */
@media (any-hover: none) {
    /* ... */
}

以上是关于scss 使用CSS检测触摸设备的主要内容,如果未能解决你的问题,请参考以下文章

使用 JavaScript 检测“触摸屏”设备的最佳方法是啥?

检测设备是不是有键盘,或者是触摸设备

javascript 使用JS检测触摸设备

是否在所有设备中都通过点击事件检测到触摸设备中的触摸?

CSS:触摸屏设备上的悬停行为

javascript 用于检测触摸/移动设备的各种JavaScript方法