Skip to content

Instantly share code, notes, and snippets.

@abilogos

abilogos/detect-zoom.js

Created November 24, 2019 20:24
Show Gist options
  • Star 10 You must be signed in to star a gist
  • Fork 4 You must be signed in to fork a gist
  • Save abilogos/66aba96bb0fb27ab3ed4a13245817d1e to your computer and use it in GitHub Desktop.
Save abilogos/66aba96bb0fb27ab3ed4a13245817d1e to your computer and use it in GitHub Desktop.
Download ZIP
Getting browser Zoom level
Raw
detect-zoom.js
//for zoom detection
px_ratio = window.devicePixelRatio || window.screen.availWidth / document.documentElement.clientWidth;
$(window).resize(function(){isZooming();});
function isZooming(){
var newPx_ratio = window.devicePixelRatio || window.screen.availWidth / document.documentElement.clientWidth;
if(newPx_ratio != px_ratio){
px_ratio = newPx_ratio;
console.log("zooming");
return true;
}else{
console.log("just resizing");
return false;
}
}
@RemcoSmitsDev
Copy link

This is not working with an 4k iMac. When you have normal zoom level(100%) it will show up as 200%. Any ideas to wrap around this problem?

@abilogos
Copy link
Author

@RemcoSmitsDev : sorry to hear that, the script I have wrote is just detecting zooming and not the percentage.
one thing i want to mention that it is based on the css px which is different from pixels.
I have got a 4k monitor and I had set everything to scale 200% in order to show everything bigger.
maybe this could be the reason why you get 200%.
lets check your screen resolution here and see if it reports 1080p 0r 4k ?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment