En este artículo, discutiremos cómo se puede encontrar la cantidad actual de zoom en una página web.
Método 1: usar la propiedad de ancho exterior e interior: es más fácil detectar el nivel de zoom en los navegadores webkit como Chrome y Microsoft Edge. Este método usa las propiedades outsideWidth e innerWidth , que son la función incorporada de JavaScript. El ancho exterior primero se resta por 10, para tener en cuenta la barra de desplazamiento y luego se divide con el ancho interior para obtener el nivel de zoom.
Nota: Es posible que la cantidad de zoom no sea exactamente la cantidad de zoom que muestra el navegador. Esto se puede resolver redondeando el valor.
Sintaxis:
let zoom = (( window.outerWidth - 10 ) / window.innerWidth) * 100;
Ejemplo:
HTML
<!DOCTYPE html>
<html lang="en">
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<b>
Zoom in or out of the page to
get the current zoom value
</b>
<p>Current Zoom Level:
<span class="output">
</span>
</p>
<script>
window.addEventListener(
"resize", getSizes, false);
let out = document.querySelector(".output");
function getSizes() {
let zoom = ((window.outerWidth - 10)
/ window.innerWidth) * 100;
out.textContent = zoom;
}
</script>
</body>
</html>
Producción:
Método 2: uso de la propiedad clientWidth y clientHeight: como no es posible encontrar la cantidad de zoom en varios navegadores, se pueden averiguar las dimensiones del sitio web y la operación se puede realizar utilizando estas dimensiones de la página. Este método usa las propiedades clientWidth y clientHeigh , que son la función incorporada de JavaScript.
Sintaxis:
let zoom = body.clientWidth + "px x " + body.clientHeight + "px";
Ejemplo:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<style>
/* Set the body to occupy the
whole browser window
when there is less content */
body {
height: 100vh;
margin: 0;
}
</style>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<b>
Zoom in or out of the page to
get the current zoom value
</b>
<p>
Current Zoom Level in pixels:
<span class="output">
</span>
</p>
<script>
window.addEventListener(
"resize", getSizes, false);
let out = document.querySelector(".output");
function getSizes() {
let body = document.body;
let zoom = body.clientWidth + "px x " +
body.clientHeight + "px";
out.textContent = zoom;
}
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por kothawade29 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA