Last active
June 27, 2024 15:27
-
-
Save johannschopplich/d7696bdd016e59e8659bc005735641dc to your computer and use it in GitHub Desktop.
Media queries for differentiating mouse and touch-based screens
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@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 */ | |
} | |
/* Detailed explanation: */ | |
/* The primary input mechanism of the device includes a | |
pointing device of limited accuracy. */ | |
@media (pointer: coarse) { ... } | |
/* The primary input mechanism of the device | |
includes an accurate pointing device. */ | |
@media (pointer: fine) { ... } | |
/* The primary input mechanism of the | |
device does not include a pointing device. */ | |
@media (pointer: none) { ... } | |
/* Primary input mechanism system can | |
hover over elements with ease */ | |
@media (hover: hover) { ... } | |
/* Primary input mechanism cannot hover | |
at all or cannot conveniently hover | |
(e.g., many mobile devices emulate hovering | |
when the user performs an inconvenient long tap), | |
or there is no primary pointing input mechanism */ | |
@media (hover: 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) cannot | |
hover (or there are no pointing input mechanisms) */ | |
@media (any-hover: none) { ... } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment