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.
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:
- Border interface: That’s where the user can configure the app’s behavior.
- 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: