Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do I programmatically determine the current zoom level of a browser window? [duplicate]

I want to find out the zoom level of what is being displayed in a browser window based on the javascripts' window object properties to which I have access. I just can't seem to find the right mathematical formula for the zoom based on the inner width, page offset, etc. I found a solution, but that uses the document.body.getBoundingClientRect call which does not return anything in my case and for which I can't tell if there's a suitable replacement from the window properties. I am using Safari.

like image 491
Mihai Fonoage Avatar asked May 11 '10 15:05

Mihai Fonoage


People also ask

How do I check my browser zoom level?

By default, Chrome sets the zoom level to 100%. To manually adjust the settings, use the Ctrl key and “+” or “-” combos to increase or decrease the page magnification.

Can JavaScript detect the browser zoom level?

Method 1: Using outerWidth and innerWidth Property: It is easier to detect the zoom level in webkit browsers like Chrome and Microsoft Edge. This method uses the outerWidth and innerWidthproperties, which are the inbuilt function of JavaScript.


1 Answers

You can determine zoom level by comparing various properties to document.documentElement.clientWidth depending on your browser:

  • vs. window.outerWidth (on Opera)
  • vs. document.defaultView.getComputedStyle(document.documentElement, null).width (on Safari, Chrome)
  • or compare screen.deviceXDPI and screen.logicalXDPI (on IE8).

The ratio of these values is the current zoom level (e.g. a ratio of 2 indicates a zoom of 200%).

like image 168
John Feminella Avatar answered Oct 12 '22 00:10

John Feminella