-
-
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 25, 2022
•
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