Como puedo manipular el zoom del navegador utilizando el estandar HTML5, es un proyecto de fundamentos del computador y no tengo mucha experiencia.
1 respuesta
Una opción, podría ser usar la propiedad CSS zoom para cambiar el tamaño de el/los elemento/s en los que estás interesado.
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>
Esta propiedad no es una propiedad que se encuentre estandarizada. Es por esa razón que por ejemplo Firefox no la soporta.
Se podría intentar usar otras alternativas similares. Como podría ser transform: scale(ancho, alto); dependiendo el caso.
Otra posibilidad, más tediosa, sería escalar las medidas de los elementos manualmente.
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>