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.
zoom

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:

3 Likes