# Zoom of a browser

**URL:** <https://discourse.processing.org/t/zoom-of-a-browser/42421>\
**Category:** Beginners\
**Created:** [July 14, 2023, 1:31pm UTC](https://discourse.processing.org/t/zoom-of-a-browser/42421 "2023-07-14T13:31:05Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Chigoz](https://avatars.discourse-cdn.com/v4/letter/c/46a35a/32.png) [@Chigoz](https://discourse.processing.org/u/Chigoz)\
**Post date:** [July 14, 2023, 1:31pm UTC](https://discourse.processing.org/t/zoom-of-a-browser/42421/1 "2023-07-14T13:31:05Z")

</div>

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](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/4/4/444593a93db57fc8371d262c19607dcf8824c009.png)

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.

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [July 14, 2023, 10:14pm UTC](https://discourse.processing.org/t/zoom-of-a-browser/42421/2 "2023-07-14T22:14:44Z")

</div>

> [@Chigoz](#):
>
> Clicking the three dots on most browsers gives access to it’s zoom.

> [@Chigoz](#):
>
> , how do I access the zoom DOM element of a browser?

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.

---

<div class="post-metadata">

**Author:** ![Chigoz](https://avatars.discourse-cdn.com/v4/letter/c/46a35a/32.png) [@Chigoz](https://discourse.processing.org/u/Chigoz)\
**Post date:** [July 15, 2023, 4:19am UTC](https://discourse.processing.org/t/zoom-of-a-browser/42421/3 "2023-07-15T04:19:50Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [July 15, 2023, 10:26am UTC](https://discourse.processing.org/t/zoom-of-a-browser/42421/4 "2023-07-15T10:26:12Z")

</div>

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:

> **[Web APIs | MDN](https://developer.mozilla.org/en-US/docs/Web/API)**
>
> When writing code for the Web, there are a large number of Web APIs available. Below is a list of all the APIs and interfaces (object types) that you may be able to use while developing your Web app or site.