Como obtener las medidas del Viewport con Javascript

viernes, enero 16, 2015 Publicado por: Oscar Meza


El siguiente es un script escrito en Javascript que permite ver el ancho y alto del Viewport de nuestro navegador, muy útil cuando estamos diseñando algun sitio o aplicación web.

<html>

<head>
    <meta name="viewport" content="width=device-width, user-scalable=no">
</head>

<body>

<script type="text/javascript">


 var viewportwidth;
 var viewportheight;
 
 // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
 
 if (typeof window.innerWidth != 'undefined')
 {
      viewportwidth = window.innerWidth,
      viewportheight = window.innerHeight
 }
 
// IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)

 else if (typeof document.documentElement != 'undefined'
     && typeof document.documentElement.clientWidth !=
     'undefined' && document.documentElement.clientWidth != 0)
 {
       viewportwidth = document.documentElement.clientWidth,
       viewportheight = document.documentElement.clientHeight
 }
 
 // older versions of IE
 
 else
 {
       viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
       viewportheight = document.getElementsByTagName('body')[0].clientHeight
 }
document.write('<p>Your viewport width is '+viewportwidth+'x'+viewportheight+'</p>');

</script>

</body>
</html>


Este escript esta disponible en el siguiente link: http://www.mejores-hosting.org/tools/viewportsize.html

El siguiente link muestra los tamaños de Viewport en diferentes Tablets y Teléfonos móbiles http://www.canbike.org/CSSpixels/

0 comentarios: