Software sencillo y gratuito

Cómo mostrar el tamaño de la ventana con Javascript

En este artículo quiero compartir con vosotros la herramienta que utilizo muchas veces cuando estoy haciendo un diseño web responsive (adaptativo). Anteriormente ya os he hablado de la herramienta ACE RWD Tester para probar los diseños, pero lo que vamos a ver aquí es para una fase anterior en el diseño; es para utilizar mientras estamos creando los códigos css adaptativos.

Se trata simplemente de cuatro líneas de código que nos permitirán conocer el ancho de la pantalla en todo momento, de manera que podamos calcular los breakpoints para nuestro css con gran facilidad. Me explico: cuando estamos haciendo el diseño adaptativo debemos indicar en nuestras hojas de estilo mediante breakpoints cómo deben comportarse y mostrarse los elementos de la página en función del tamaño de la pantalla en que se esté visualizando. Los breakpoints son los tamaños de pantalla en los que el comportamiento de los elementos debe cambiar (por ejemplo, cuando la pantalla mide menos de 400 pixels el título debe centrarse y debe medir el 90% del ancho de la pantalla). A mi entender, la manera más cómoda y eficaz de hacer esto es simplemente modificar el tamaño de la ventana del navegador e ir viendo cómo responde el diseño. Pues bien, si mientras modificamos el tamaño de la ventana podemos ver el ancho que tiene el área de visualización podremos determinar muy facilmente en qué anchos debe ir cambiando el comportamiento de los distintos elementos.

Pues bien, con apenas 4 líneas de código podremos ver el ancho de la pantalla a medida que lo modifiquemos. El código total es el siguiente:

<html>
<head>
...
<script type="text/javascript">
   function tamano(){
      document.getElementById('ancho').style.display='block'
      document.getElementById('ancho').innerHTML=window.innerWidth.toString();
   }
</script>
</head>
<body onresize="tamano();">
<div id="ancho" style="display:none; position: fixed; top: 50px; padding: 2px 5px; border-radius: 3px; background: #666; color: #eee; box-shadow:3px 3px 3px #aaa; z-index:10;"></div>
...
</body>
</html>

Analicemos las partes básicas del código.

Lo primero es el elemento que muestra el ancho. Este es el div ‘ancho’ de la línea 12:

<div id="ancho" style="display:none; position: fixed; top: 50px; padding: 2px 5px; border-radius: 3px; background: #666; color: #eee; box-shadow:3px 3px 3px #aaa; z-index:10;"></div>

Como véis, el div está vacío. Apenas está definido su id y tiene un poco de estilo inline que hace que se muestre en la parte superior izquierda de la pantalla. Tiene la propiedad display en ‘none’, de manera que de momento no se muestra.

En la declaración del cuerpo de la página se indica que cuando se modifique el tamaño de la misma, se ha de ejecutar una función llamada ‘tamano’, que será la encargada de mostrar el ancho.

<body onresize="tamano();">

Por último, la función ‘tamano’ está definida en la cabecera de la página, entre las etiquetas <head> y </head>

   function tamano(){
      document.getElementById('ancho').style.display='block'
      document.getElementById('ancho').innerHTML=window.innerWidth.toString();
   }

En la línea 6 se indica que el div ‘ancho’ debe hacerse visible. Y en la línea 7 indicamos que el contenido del div ‘ancho’ ha de ser el ancho de la página.

Podéis ver el script en acción pulsando el siguiente botón:

Espero que os haya resultado útil. Saludos.

Publicado en Diseño web Etiquetado con: , ,
5 Comentarios en “Cómo mostrar el tamaño de la ventana con Javascript
  1. Pablo dice:

    Hola, existe la posibilidad de una vez obtenido el valor del ancho y el alto de la ventana del navegador …..se programe toooooda la pagina de acuerdo a esos valores ? …..por ejemplo decir margin-left : anchoventana/10

  2. Marcelo dice:

    Muy buen código! Lo he ajustado a mi página en desarrollo y es muy útil contar con esa información siempre a la vista. Muchas gracias por compartir. Quisiera saber si hay alguna forma de lograr que el valor también aparezca al momento de cargar la página. He modificado la sentencia “” pero no he tenido suerte…
    Desde ya, gracias por tu tiempo,
    Marcelo.

    • Marcelo dice:

      por sentencia me refiero a: body onresize=”tamano();” onLoad=”tamano();”

      • Alex dice:

        Hola Marcelo,

        Tu código es correcto pero las comillas que estás usando están provocando el fallo.
        Prueba este código:
        onresize=”tamano();” onLoad=”tamano();”
        usando las comillas dobles del shift+2

        Cuéntame si se te solucionó.
        Saludos

1 Pings/Trackbacks para "Cómo mostrar el tamaño de la ventana con Javascript"

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

*