I use the following code to detect whether the device is a touch device or not:
var isTouchDevice = 'ontouchstart' in window || navigator.msMaxTouchPoints;
if(isTouchDevice)
{
$('body').addClass('yes-touch');
}
else
{
$('body').addClass('no-touch');
}
I use this to only show :hover states when it is NOT a touch device (as most touch devices interpret a tap as a hover).
.no-touch .element:hover {
color: red;
}
The problem is, one of our PCs in the office is an all-on-one touch screen PC, which means that when using a mouse the hover states don't occur.
Is there a way to work out whether a mouse is being used on a touch screen device? In other words, it should have the no-touch class applied when the mouse is being used and the yes-touch class applied when the touch screen is being used.
Aucun commentaire:
Enregistrer un commentaire