MEDIA QUERY TESTER
YOUR DEVICE:
@media(hover: none)
@media(hover: hover)
@media(any-hover: none)
@media(any-hover: hover)
@media(pointer: none)
@media(pointer: fine)
@media(pointer: coarse)
@media(any-pointer: none)
@media(any-pointer: fine)
@media(any-pointer: coarse)
USUAL FOR LAPTOPS:
@media(hover: none)
@media(hover: hover)
@media(any-hover: none)
@media(any-hover: hover)
@media(pointer: none)
@media(pointer: fine)
@media(pointer: coarse)
@media(any-pointer: none)
@media(any-pointer: fine)
@media(any-pointer: coarse)
USUAL FOR TOUCHSCREEN LAPTOPS:
@media(hover: none)
@media(hover: hover)
@media(any-hover: none)
@media(any-hover: hover)
@media(pointer: none)
@media(pointer: fine)
@media(pointer: coarse)
@media(any-pointer: none)
@media(any-pointer: fine)
@media(any-pointer: coarse)
USUAL FOR IPHONES AND IPADS:
@media(hover: none)
@media(hover: hover)
@media(any-hover: none)
@media(any-hover: hover)
@media(pointer: none)
@media(pointer: fine)
@media(pointer: coarse)
@media(any-pointer: none)
@media(any-pointer: fine)
@media(any-pointer: coarse)
USUAL FOR ANDROID* PHONES AND TABLETS:
although some Android devices are incapable of hovering
@media(hover: none)
@media(hover: hover)
@media(any-hover: none)
@media(any-hover: hover)
@media(pointer: none)
@media(pointer: fine)
@media(pointer: coarse)
@media(any-pointer: none)
@media(any-pointer: fine)
@media(any-pointer: coarse)
hoverpointer-media-query
Your very own basic web page, ready for you to customize.
oliviertassinari
Remix on Glitch
View Source
Embed This App
Copy and paste this code anywhere you want to embed this app.
<div class="glitch-embed-wrap" style="height: 486px; width: 100%;"> <iframe allow="geolocation; microphone; camera; midi; encrypted-media" src="https://glitch.com/embed/#!/embed/hoverpointer-media-query?previewSize=100&previewFirst=true&sidebarCollapsed=true" alt="hoverpointer-media-query on Glitch" style="height: 100%; width: 100%; border: 0;"> </iframe> </div>
View Source
to customize the embed under the "Share" menu.
