Is it possible to detect the browser zoom level when the user changed the zoom level of browser, and the default zoom level using javascript. I need to call different xml files according to the zoom level change.
-
4-1: Don't repost the same question just because you don't like the original answer.zzzzBov– zzzzBov2010-11-09 05:04:49 +00:00Commented Nov 9, 2010 at 5:04
-
1Especially when the original answer was perfectly valid.Christian Mann– Christian Mann2010-11-09 05:05:25 +00:00Commented Nov 9, 2010 at 5:05
-
Does this answer your question? How to detect page zoom level in all modern browsers?gre_gor– gre_gor2023-06-02 15:20:37 +00:00Commented Jun 2, 2023 at 15:20
Add a comment
|
2 Answers
I found that you have to vary for each browser:
This works great in safari and chrome:
zoom = parseInt(document.defaultView.getComputedStyle(document.documentElement, null).width,10)/document.documentElement.clientWidth
This works well in IE8+ (unless your user has some freakish screen....):
zoom = window.screen.deviceXDPI/96
And for Firefox and IE7 I use this although I still haven't got it to work with Firefox on the Mac...
Good luck.
Comments
This will give the current zoom ratio relative to the initial zoom when the page was first loaded , if it was loaded with no zoom ( 100% ) then it will give you the real actual current zoom :
window.addEventListener('resize',()=>{
var height = Math.max( body.scrollHeight, body.offsetHeight,
html.clientHeight, html.scrollHeight, html.offsetHeight );
const ratio = ( height / document.documentElement.clientHeight )
if (!window.zc_)
{
window.zc_ = 100/ratio
}
const zoom = ratio* window.zc_
console.log(
zoom
);
})