# Controlar o zoom do navegador via CSS ou API

**URL:** <https://community.latromi.com.br/t/controlar-o-zoom-do-navegador-via-css-ou-api/847>\
**Category:** Ajuda & Suporte\
**Tags:** css\
**Created:** [Julho 28, 2022, 8:24pm UTC](https://community.latromi.com.br/t/controlar-o-zoom-do-navegador-via-css-ou-api/847 "2022-07-28T20:24:52Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![gustavo.cazarotto](https://community.latromi.com.br/letter_avatar_proxy/v4/letter/g/cdc98d/32.png) [@gustavo.cazarotto](https://community.latromi.com.br/u/gustavo.cazarotto)\
**Post date:** [Julho 28, 2022, 8:24pm UTC](https://community.latromi.com.br/t/controlar-o-zoom-do-navegador-via-css-ou-api/847/1 "2022-07-28T20:24:52Z")

</div>

Estou criando um relatório que tem como objetivo ser impresso. Para isso, o formulário teria o tamanho de uma A4 e iria diminuir o zoom e aplicar a função `print()` do javascript. Entretanto, estou tendo dificuldades para realizar esse zoom.  
A primeira ideia que tive foi alterar os parâmetros da página com esse código:

```nohighlight
document.body.style.zoom = "80%";

```

Mas ele só diminui o tamanho do elemento dentro da aba, e não o zoom da aba em si, como o que ocorre com o comando Control e +.

Eu achei essa outra função usando a API **chrome.tabs** :

![erro](https://community.latromi.com.br/uploads/default/original/1X/084ceca69c51aef52d8644ad4f2366c6abd01e88.png)

Porém, quando eu testo dentro do formulário, eu recebo a seguinte mensagem de erro:

![image](https://community.latromi.com.br/uploads/default/original/1X/2ff49cf5ce947630d2c8f33d41121ccc8ea8101f.png)

Tenho pouca experiência usando APIs dentro do Latromi, então gostaria de uma ajuda nessa questão.

---

<div class="post-metadata">

**Author:** ![daniel.giacomelli](https://community.latromi.com.br/user_avatar/community.latromi.com.br/daniel.giacomelli/32/1476_2.png) [@daniel.giacomelli](https://community.latromi.com.br/u/daniel.giacomelli)\
**Post date:** [Julho 29, 2022, 2:24pm UTC](https://community.latromi.com.br/t/controlar-o-zoom-do-navegador-via-css-ou-api/847/2 "2022-07-29T14:24:57Z")

</div>

Olá @gustavo.cazarotto

Quanto ao uso das API’s do Chrome, estive dando uma pesquisada, e me parece que elas só podem ser usadas em Extensões do navegador, e não diretamente no JS da página. Por isso está retornando `undefined` ao acessar `chromes.tabs`.

Quanto o problema que você experimentou usando o ZOOM pelo CSS não consegui entender, poderia explicar melhor?

---

<div class="post-metadata">

**Author:** ![gustavo.cazarotto](https://community.latromi.com.br/letter_avatar_proxy/v4/letter/g/cdc98d/32.png) [@gustavo.cazarotto](https://community.latromi.com.br/u/gustavo.cazarotto)\
**Post date:** [Julho 29, 2022, 3:02pm UTC](https://community.latromi.com.br/t/controlar-o-zoom-do-navegador-via-css-ou-api/847/3 "2022-07-29T15:02:48Z")

</div>

Oi Daniel,

Entendo, não fazia ideia que essas API’s eram exclusivas para extensões. Provavelmente terei que encontrar outra solução.

No caso do zoom pelo CSS, o que ocorre é que o formulário, por ser maior que a tela, não exibe todo o seu conteúdo na tela, e quando eu tento imprimir, ele só exibe na impressão a parte do formulário que está aparecendo na tela naquele momento.

Quando eu modifico o CSS pelo código que eu mostrei, ele não diminui o formulário, ele diminui o que está exibido na tela. As duas imagens abaixo mostram uma comparação da folha de impressão alterando o zoom pelo CSS, e embaixo quando o zoom é alterado pelos comandos do navegador (Control++ e Control+-).

 ![image](https://community.latromi.com.br/uploads/default/original/1X/0f81ef27a168b43cb299c9f7dc1374cd4f95fab2.png)

 ![image](https://community.latromi.com.br/uploads/default/original/1X/b1b28953509b3f475711573b060c22fca6fb2a3e.png)

---

<div class="post-metadata">

**Author:** ![daniel.giacomelli](https://community.latromi.com.br/user_avatar/community.latromi.com.br/daniel.giacomelli/32/1476_2.png) [@daniel.giacomelli](https://community.latromi.com.br/u/daniel.giacomelli)\
**Post date:** [Julho 29, 2022, 3:27pm UTC](https://community.latromi.com.br/t/controlar-o-zoom-do-navegador-via-css-ou-api/847/4 "2022-07-29T15:27:52Z")

</div>

Segundo [este link](https://developer.mozilla.org/en-US/docs/Web/CSS/zoom), a propriedade **zoom** do CSS não é um recurso padronizado, e seu uso deve ser evitado:

> **Non-standard:** This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

Tente utilizar a propriedade `transform: scale()`:

```css
document.body.style.transform = 'scale(0.8)';

```