I'm developing a website to suit devices through Media Queries, however I wonder how certain events behave on touch devices. For example, how does the "hover" event behave on touch devices? And how do you replace it or adapt it to touch devices?
Are there other similar events that I should closely review?
The hover, on a touch device, works as a click. In the chrome developer tool (F12) you can see how it works.
To better adapt to the touch device you can use the modernizr and load the style sheet according to the experience :
if (Modernizr.touch){
// Ação se for dispositivo touch
} else {
// Ação sem dispositivo touch
}
Or for a more immediate solution you can use media query
@media screen and (max-width 768px)
/* CSS em dispositivos mobile */
Resolution 768px is mobile device default. The great detail is that by customizing with CSS, if the user resizes the browser he will navigate with the mouse an optimized navigation for touch.