Manipulate the default zoom that the browser has when displaying my page

Question

Manipulate the default zoom that the browser has when displaying my page

Navigation

#1 by (2 votes)

0

As I can manipulate the browser zoom using the HTML5 standard, it is a project of computer fundamentals and I do not have much experience.

html5

asked by Cokóro R1 08.08.2017 в 04:13

source

1 answer

How can I capture a number by keyboard and take it to a float type variable? Problem with arrayList data in Java

score 2 · Accepted Answer

One option, could be to use the CSS property zoom to change the size of the element (s) you are interested in.

const div = document.getElementById('prueba');

function redimensionar(tamano) {
  div.style.zoom = tamano;
}

div#prueba {
  width: 150px;
  background-color: red;
  text-align: center;
}

<div id="prueba">
  Soy feliz y ya no necesito a mis padrinos mágicos
</div>

<button onclick="redimensionar(1);">
  Tamaño normal
</button>
<button onclick="redimensionar(2);">
  Aumentar
</button>
<button onclick="redimensionar(3);">
  Aumentar más
</button>

This property is not a property that is standardized. That's why, for example, Firefox does not support it.
You could try using other similar alternatives. How could it be transform: scale (width, height); depending on the case.

Another possibility, more tedious, would be to scale the measurements of the elements manually.

const div = document.getElementById('prueba');

const anchoInicial = parseInt(getComputedStyle(div).getPropertyValue('width'));
const altoInicial = parseInt(getComputedStyle(div).getPropertyValue('height'));
const tamanoFuenteInicial = parseInt(getComputedStyle(div).getPropertyValue('font-size'));

function redimensionar(tamano) {
  div.style.width = '${anchoInicial * tamano}px';
  div.style.height = '${altoInicial * tamano}px';
  div.style.fontSize = '${tamanoFuenteInicial * tamano}px';
}

div#prueba {
  width: 150px;
  background-color: red;
  text-align: center;
}

#prueba > p {
  margin: 0;
}

<div id="prueba">
  Soy feliz y ya no necesito a mis padrinos mágicos
</div>

<button onclick="redimensionar(1);">
  Tamaño normal
</button>
<button onclick="redimensionar(2);">
  Aumentar
</button>
<button onclick="redimensionar(3);">
  Aumentar más
</button>