¿ Extensión en chrome para visualizar tamaño ventana navegador en tiempo real ?

davidj · #1 (**permalink**) 04/03/2013, 10:51

Hola!

¿ Sabéis donde podría encontrar alguna extensión o similar en chrome para poder visualizar el tamaño de la ventana del navegador ?

Es decir, cuando se reduce o amplia la ventana del navegador, que se muestre siempre el tamaño de dicha pantalla.

Saludosss!!

memoadian · #2 (**permalink**) 04/03/2013, 11:38

eso lo puedes hacer con simple javascript

Código HTML:

Ver original<script type="text/javascript">
function TamVentana() {
  var Tamanyo = [0, 0];
  if (typeof window.innerWidth != 'undefined')
  {
    Tamanyo = [
        window.innerWidth,
        window.innerHeight
    ];
  }
  else if (typeof document.documentElement != 'undefined'
      && typeof document.documentElement.clientWidth !=
      'undefined' && document.documentElement.clientWidth != 0)
  {
 Tamanyo = [
        document.documentElement.clientWidth,
        document.documentElement.clientHeight
    ];
  }
  else   {
    Tamanyo = [
        document.getElementsByTagName('body')[0].clientWidth,
        document.getElementsByTagName('body')[0].clientHeight
    ];
  }
  return Tamanyo;
}
window.onresize = function() {
  var Tam = TamVentana();
  document.getElementById('body').innerHTML = ('La ventana mide: [' + Tam[0] + ', ' + Tam[1] + ']');
};
</script>
<body id="body">
</body>

davidj · #3 (**permalink**) 05/03/2013, 02:45

Ajam, gracias pero lo que busco no es para implementarlo en una página web si no mientras navego, es decir, que siempre me muestre el tamaño de pantalla del navegador... ¿Se puede implementar este código como extensión para chrome?

memoadian · #4 (**permalink**) 05/03/2013, 12:02

pues convertitlo en extensión de chrome se puede pero quien sabe como.

yo lo que hice fue esto:

Código HTML:

Ver original<!DOCTYPE html>
<html lang="es">
<head>
 
  <!--======== Basic Page Needs =========-->
 
  <title>Medidas de pantalla</title>
  <meta charset="utf-8">
 
  <style type="text/css">
    body, html{
      padding:0;
      margin:0;
      height:100%;
    }
  </style>
 
  <!--======== Scripts =========-->
 
<script type="text/javascript">
  function TamVentana() {
    var Tamanyo = [0, 0];
    if (typeof window.innerWidth != 'undefined'){
      Tamanyo = [
          window.innerWidth,
          window.innerHeight
      ];
    }else if (typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth != 'undefined' && document.documentElement.clientWidth != 0){
      Tamanyo = [
        document.documentElement.clientWidth,
        document.documentElement.clientHeight
      ];
    }else{
      Tamanyo = [
          document.getElementsByTagName('body')[0].clientWidth,
          document.getElementsByTagName('body')[0].clientHeight
      ];
    }
    return Tamanyo;
  }
  function buscador(){
    alert('pedro');
  }
  window.onresize = function() {
    var Tam = TamVentana();
    document.getElementById('body').innerHTML = ('La ventana mide: [' + Tam[0] + ', ' + Tam[1] + ']');
  };
  window.onload = function(){
    var Tam = TamVentana();
    document.getElementById('body').innerHTML = ('La ventana mide: [' + Tam[0] + ', ' + Tam[1] + ']');
    var input = document.getElementById('buscador');
    input.onchange = function(){
      var iframe = document.getElementById('iframe');
      iframe.src = 'http://' + input.value;
    }
  }
</script>
</head>
<body>
  <section id="body"></section>
  <input id="buscador" value="" name="buscador"/>
  <iframe id="iframe" src="http://forosdelweb.com" width="100%" height="100%" frameborder=0></iframe>
</body>
</html>

te pone un pequeño input donde colocas la direccion así: "cursosdelwebmaster.com" sin el http

y te abre el iframe y al hacer resize de tu ventana te va diciendo las medidas. No es muy pulcro pero sirve perfectamente en chrome.

davidj · #5 (**permalink**) 05/03/2013, 12:18

Lo probaré gracias!