| 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