Conocer el ancho y el alto de una ventana del navegador ayuda a un desarrollador web a mejorar la experiencia del usuario. Puede ayudar a mejorar las animaciones del navegador y el posicionamiento relativo de divisiones y contenedores. Javascript proporciona un objeto de ventana que representa una ventana de navegador abierta. Proporciona las diversas propiedades que definen las dimensiones de la ventana de su navegador. Son los siguientes:
- innerWidth: Devuelve el ancho del área de contenido de la ventana.
- innerHeight: Devuelve la altura del área de contenido de la ventana.
- outsideWidth: Devuelve el ancho de la ventana del navegador.
- outerHeight: Devuelve la altura de la ventana del navegador.
Nota: Estas dimensiones están en píxeles.
Dado que los píxeles son una unidad dimensionalmente cuadrada. No se puede decir con precisión cuántos píxeles se encuentran en la diagonal. Puede aproximar la diagonal usando la altura y el ancho del navegador y aplicando el teorema de Pitágoras.
Teorema de Pitágoras: Para un triángulo rectángulo, la hipotenusa al cuadrado es la suma de la base al cuadrado y la altura al cuadrado.
Análoga a la fórmula anterior, Diagonal = Squared_root(Width^2 + Height^2) .
Fragmento de código:
<script>
function myFunction() {
var w = window.outerWidth;
var h = window.outerHeight;
var d = Math.sqrt(w*w + h*h);
console.log('Width: ' + w);
console.log('Height: ' + h);
console.log('Diagonal: ' + Math.ceil(d));
}
</script>
El código anterior imprimirá la altura y el ancho del navegador en la ventana de la consola. La ventana de la consola se puede abrir usando las herramientas de desarrollo en su navegador.
Nota: Para obtener las dimensiones completas de la pantalla, cambie su navegador al modo de pantalla completa. La mayoría de los navegadores cambian el modo de pantalla completa con la tecla F11.
El siguiente código muestra los resultados en la ventana del navegador utilizando la propiedad innerHTML de Javascript.
<!DOCTYPE html>
<html>
<body>
<p>
Switch to Fullscreen Mode using the F11 key.
<br>Click the button to display the dimensions
of this browser window.<br> All dimensions
are in pixel units.
</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
var i_w = window.innerWidth;
var i_h = window.innerHeight;
var o_w = window.outerWidth;
var o_h = window.outerHeight;
var d = Math.sqrt(o_w * o_w + o_h * o_h);
document.getElementById("demo").innerHTML
= "Inner Width: " + i_w +
"<br>Inner Height " + i_h + "<br>Outer Width: "
+ o_w + "<br>Outer Height: " +
o_h + "<br>Diagonal: " + Math.ceil(d);
}
</script>
</body>
</html>
Producción:
- Antes de presionar el botón ‘Pruébalo’:
- Después de presionar el botón ‘Pruébalo’:
Nota: si conoce la densidad de píxeles lineales de la pantalla de su monitor, puede dividir las dimensiones obtenidas del código anterior con la densidad para obtener las dimensiones en centímetros o pulgadas.
Publicación traducida automáticamente
Artículo escrito por chitrankmishra y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA