¿Estas atascado? ¡Yo te ayudo!, pregunta aquí.

Ajustar web al tamaño / resolucion del navegador / monitor.

Todo código relacionado exclusivamente con Javascript, como jquery, ajax, javascript en bruto, ...

Notapor alexiter » Mié Abr 16, 2014 10:14 am

El descubrir como hacer esto, supuso para mi encontrar la piedra filosofal del diseño / programacion de paginas web.

No importa cual sea el navegador, bueno en realidad solo lo he probado con:

Internet Explorer 9 (y supongo que en adelante).
Chrome (ahora tengo la version Versión 33.0.1750.154 m, pero intuyo que funciona en todas)
Firefox (version 28.0 y supongo que en adelante).
Safari (version 5.1.7)

Android (el navegador que trae por defecto el firmware kitkat).
Iphone (el navegador que trae por defecto).

Y logicamente deduzco que con todos estos navegadores sera suficiente para el 99,9% de los diseñadores web.

Lo primero que tenemos que hacer es literalmente hacer la web, pero es importante aunque no imprescindible, que todos los tamaños y posiciones de los div, imagenes, inputs, buttons, etc... tengan valores fijos (en px o pt) y no porcentajes (nada de 50%, etc...), Ya que nuestro pequeño codigo se encargara de ajustar la proporcion (ajustar una proporcion de una proporcion da mas trabajo al servidor y puede generar descuadres importantes).

Imaginemos que tenemos una web hecha para una resolucion fija de 1920x1080 (en realidad seria mas bien 1920x900, ya que en los navegadores a la altura de la web hay que quitarle el espacio que ocupan las barras de herramientas, titulo de la ventana del navegador, barra de direcciones, etc...).

10.jpg
10.jpg (172.94 KiB) Visto 2008 veces


En conclusion yo soy partidario de crear la pagina para 1920x900, de esa manera la reduccion no perdera calidad, y tardara la necesidad de ampliarla en un futuro (aun queda muuucho para que se vendan masivamente monitores con mas resolucion que los FullHD ).

Bien, supongamos que tenemos ya nuestra pagina web hecha con una resolucion de 1920x900, ahora viene lo interesante:

1º Añadiremos estos dos archivos a nuestra web:
Código: Seleccionar todo
<script type="text/javascript" src="js/funciones.js"></script>
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>


El jquery-1.11.0.min.js lo podemos descargar de la web oficial de jquery, la version no es importante siempre que sea mas moderna que la que he puesto yo.

El archivo funciones.js lo crearemos nosotros y dentro pondremos:

Código: Seleccionar todo
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 ajustar() {

var zoom="";
var Tam = TamVentana();

zoom=(Tam[0]/1920);
 
document.body.style.webkitTransform = "scale("+zoom+")";
document.body.style.MozTransform = "scale("+zoom+")";
document.body.style.msTransform = "scale("+zoom+")";
document.body.style.OTransform = "scale("+zoom+")";
document.body.style.transform = "scale("+zoom+")";

}


Este codigo basicamente hace dos funciones, la primera funcion detecta el tamaño de la ventana en ese momento, y el segundo ejecuta la redimension al tamaño proporcional de las dimensiones que la primera funcion devuelve.

Por ultimo nos vamos a nuestra web de nuevo y añadimos el disparador de la funcion cada vez que se modifique el tamaño de la ventana, asi como cuando carga la pagina por primera vez.

Código: Seleccionar todo
<body onload="ajustar();" >
<script>
window.onresize = function() {
  ajustar();
};</script>



Como se puede ver lo que hacemos es añadir a la etiqueta body la ejecucion de la funcion "ajustar()" cuando carga la pagina web, y despues volvemos a llamar a la funcion ajustar cada vez que el javascript detecta una redimension de la ventana del navegador.

Es importante aclarar que yo soy partidario de mantener las proporciones, con lo que la redimension la hago solo de la anchura de la pagina, no de la altura, ya que si lo hiciera de las dos las imagenes y el texto se aplastarian o alargarian y quedaria muy mal, ademas es comodo usar la rueda del raton para desplazarse arriba y abajo segun la necesidad, y no seria tan comodo tener que mover una barra de desplazamiento de izquierda a derecha.

Adjunto pondre el archivo funciones.js y de un archivo ejemplo ( ajuste_automatico.html)

ajuste_automatico.rar
(987 Bytes) 213 veces
alexiter
Site Admin
 
Mensajes: 149
Registrado: Dom Nov 17, 2013 9:54 pm

Volver a Javascript (jquery, ajax, ...)

cron
  • Buscar mensajes nuevos
  • Buscar temas sin respuesta
  • ¿Quién está conectado?
  • En total hay 1 Usuario identificado :: 0 registrado, 0 ocultos y 1 invitado (basados en usuarios activos en los últimos 5 minutos)
  • La mayor cantidad de usuarios identificados fue 619 el Dom May 03, 2020 11:11 pm
  • Usuarios navegando por este Foro: No hay usuarios registrados visitando el Foro y 1 invitado