-
-
Save akroii/9dec9e9cfb72bee34f0928c53db0b12f to your computer and use it in GitHub Desktop.
Ultra performant device checking
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
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <title>huhu</title> | |
| <meta name="viewport" content="width=device-width"> | |
| <style> | |
| html { | |
| touch-action: manipulation; | |
| height: fill-available; | |
| height: -webkit-fill-available; | |
| } | |
| body { | |
| margin: 0; | |
| font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; | |
| font-size: 5px; | |
| letter-spacing: 1.2px; | |
| min-height: 100vh; | |
| min-height: -webkit-fill-available; | |
| } | |
| /* smartphones, touchscreens */ | |
| @media (hover: none) and (pointer: coarse) { | |
| body { | |
| background-color: darkgoldenrod; | |
| } | |
| } | |
| /* stylus-based screens */ | |
| @media (hover: none) and (pointer: fine) { | |
| body { | |
| background-color: blueviolet; | |
| } | |
| } | |
| /* Nintendo Wii controller, Microsoft Kinect */ | |
| @media (hover: hover) and (pointer: coarse) { | |
| body { | |
| background-color: aqua; | |
| } | |
| } | |
| /* mouse, touch pad */ | |
| @media (hover: hover) and (pointer: fine) { | |
| body { | |
| background-color: antiquewhite; | |
| } | |
| } | |
| /* at least one input mechanism of the device includes a pointing device of limited accuracy. */ | |
| @media (any-pointer: coarse) { | |
| body { | |
| background: green; | |
| } | |
| } | |
| /* at least one input mechanism of the device includes an accurate pointing device. */ | |
| @media (any-pointer: fine) { | |
| body { | |
| background: red; | |
| } | |
| } | |
| /* the device does not include any pointing device. */ | |
| @media (any-pointer: none) { | |
| body { | |
| background: yellow; | |
| } | |
| } | |
| @media (any-hover: hover) { | |
| body { | |
| background: blue; | |
| } | |
| } | |
| /* one or more available input mechanism(s) can hover, but not with ease (for example simulating the hovering when performing a long touch) */ | |
| @media (any-hover: on-demand) { | |
| body { | |
| background: grey; | |
| } | |
| } | |
| /* one or more available input mechanism(s) cannot hover or there are no pointing input mechanisms */ | |
| @media (any-hover: none) { | |
| body { | |
| background: black; | |
| } | |
| } | |
| </style> | |
| <script> | |
| /* iphone,ipad ... */ | |
| if (window.matchMedia('(any-hover: none)').matches) { | |
| alert("any hover none"); | |
| } | |
| /* desktop ... */ | |
| if (window.matchMedia('(any-hover: hover)').matches) { | |
| alert("any hover hover"); | |
| } | |
| </script> | |
| </head> | |
| <body class="box"> | |
| huhu | |
| </body> | |
| </html> |
Author
akroii
commented
Feb 18, 2022
•
// Create a condition that targets viewports at least 768px wide
const mediaQuery = window.matchMedia('(any-hover: none)')
function handleTabletChange(e) {
// Check if the media query is true
if (e.matches) {
// Then log the following message to the console
console.log('Media Query Matched!')
}
}
// Register event listener
mediaQuery.addListener(handleTabletChange)
// Initial check
handleTabletChange(mediaQuery)
const queryToMatch = '';
const [matches, setMatches] = useState(window.matchMedia(queryToMatch).matches);
useEffect(() => {
const media = window.matchMedia(queryToMatch);
// If there is a change update the match
if (media.matches !== matches) setMatches(media.matches);
// Add the listener to update the state
const listener = () => setMatches(media.matches);
media.addEventListener('change', listener);
return () => media.addEventListener('change', listener);
}, [matches, queryToMatch]);
get width dynamically
var observer = new ResizeObserver( resizeObserverEntries => {
for (let entry of resizeObserverEntries) {
const rect = entry.contentRect;
console.log("Element:", entry.target);
console.log(`Element size: ${rect.width}px x ${rect.height}px`);
console.log(`Element padding: ${rect.top}px ; ${rect.left}px`);
}
});
observer.observe(headerPadd);
const isTouchDevice = () => {
return window.matchMedia("(pointer: coarse)").matches
}
const isDesktopDevice = () => {
return window.matchMedia("(hover: hover) and (pointer: fine)").matches
}
if(isTouchDevice()){
const htmlRoot = document.getElementsByTagName("html")[0];
if(!htmlRoot.classList.contains("mobile")){
htmlRoot.classList.add("mobile");
htmlRoot.classList.add("no-desktop");
}
if(htmlRoot.classList.contains("no-mobile")){
htmlRoot.classList.remove("no-mobile");
}
}
if(isDesktopDevice()){
const htmlRoot = document.getElementsByTagName("html")[0];
if(!htmlRoot.classList.contains("desktop")){
htmlRoot.classList.add("desktop");
htmlRoot.classList.add("no-mobile");
}
if(htmlRoot.classList.contains("desktop")){
htmlRoot.classList.remove("no-desktop");
}
}
const htmlRoot = document.getElementsByTagName("html")[0];
var screenWidth = new ResizeObserver( resizeObserverEntries => {
for (let entry of resizeObserverEntries) {
const rect = entry.contentRect;
if(Math.round(rect.width) > 1200){
htmlRoot.classList.add("simulate-desktop");
}else{
htmlRoot.classList.remove("simulate-desktop");
}
}
});
screenWidth.observe(htmlRoot)
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment