2019.01.11.pointer-accuracy-with-media-features |
<html> | |
<head> | |
<style> | |
.container { | |
margin-top: 0px; | |
} | |
.container > span { | |
display: block; | |
} | |
@media (pointer: fine) { | |
.container > span:after { | |
content: "A high accuracy device has been detected."; | |
} | |
} | |
@media (pointer: coarse) { | |
input[type="checkbox"], | |
input[type="radio"] { | |
min-width:30px; | |
min-height:40px; | |
background:transparent; | |
} | |
.container > span { | |
font-size: 16px; | |
} | |
.container > span:after { | |
content: "A limited accuracy device has been detected." | |
} | |
} | |
</style> | |
</head> | |
<body> | |
<div class="container"> | |
<span></span> | |
<input type="checkbox"> | |
<input type="radio"> | |
</div> | |
</body> | |
</html> |
@media ([pointer|any-pointer]: <[none|coarse|fine]>) { | |
[styles] | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment