Zoom of a browser

Hi Pals, how do I access the zoom DOM element of a browser?..my project has a major design flaw that requires zooming out from 100 to 50%. I want to access the zoom dom so I will set the zoom at 50%. I also want the option of using buttons or input text box to increase or decrease the zoom. Check this image for more understanding of my question.

Pressing the control and - buttons will change the zoom but I don’t want users to take that route.
Clicking the three dots on most browsers gives access to it’s zoom.

The image you’ve posted refers to a browser’s interface which is controlled by the user only AFAIK.

That’s not programmatically configurable by vanilla JS nor DOM.
Maybe it’s accessible via browser’s addons.

1 Like

Thanks for the information, I have always wondered if the zoom of the browser can be accessed.

Browsers, like most “window”-styled apps, are split into 2 basic components:

  1. Border interface: That’s where the user can configure the app’s behavior.
  2. Content area: That’s where the app displays its “action”.

For browsers, the “content area” is called the document page (DOM), which is mostly rendered according to the rules of these 3 types of files: HTML, CSS & JS.

Now the “border interface” is mostly isolated from the “content area”'s programmatically influence for obvious good safety reasons.

Instead, browsers can allow a user to install addons, which can partially change the behavior of both the “border interface” & “content area”.

Besides that, browsers also offer the web API, which allows us limited access to the OS hardware: