Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Getting browser Zoom level
//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;
}
}
@QualityRank
Copy link

QualityRank commented Jul 21, 2021

Excellent. Thank you for this!

@RemcoSmitsDev
Copy link

RemcoSmitsDev commented Dec 2, 2021

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

abilogos commented Dec 22, 2021

@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