@media (hover: none){
/* touch stuff goes here */
}
好吧,哪些@媒体查询可能也有用?
@media (hover: none) and (pointer: coarse) {
/* touchscreens */
}
@media (hover: none) and (pointer: fine) {
/* stylus */
}
@media (hover: hover) and (pointer: coarse) {
/* controllers */
}
@media (hover: hover) and (pointer: fine) {
/* mouse or touchpad */
}
但这只会查询到主输入法,如果想更深入,可以使用any-hover和any-pointer查询所有输入设备。 UPD:hack for old browsers removed,似乎大多数旧浏览器不支持hover和pointer媒体查询太多.您可以使用触摸事件检测和触摸只navigator属性从另一个答案 UPD 2:在您的情况下,最好使用
if(('ontouchstart' in window) || (navigator.msMaxTouchPoints > 0) || (navigator.maxTouchPoints > 0)) {
//this is a touch device you can any action here
}else {
//it's not a touch device another code here
}
if ("ontouchstart" in document.documentElement)
{
document.write("your device is a touch screen device.");
}
else
{
document.write("your device is NOT a touch device");
}
3条答案
按热度按时间k3fezbri1#
这很简单,只有一行代码:
matchMedia
?但这只会查询到主输入法,如果想更深入,可以使用
any-hover
和any-pointer
查询所有输入设备。UPD:hack for old browsers removed,似乎大多数旧浏览器不支持
hover
和pointer
媒体查询太多.您可以使用触摸事件检测和触摸只navigator
属性从另一个答案UPD 2:在您的情况下,最好使用
ffx8fchx2#
您可以在这里使用一个简单的条件使用Javascript进行检测
另外,下面的链接在这里https://ctrlq.org/code/19616-detect-touch-screen-javascript
umuewwlo3#
在javascript中。
code pen