Escalar, adaptar una web segun el tamaño de pantalla

[mensajeescrito]

Hola amigos, les cuento:

Tengo una pagina web que se ve bien en todos los tamaños de pantalla de ordenadores fijos de mesa.

Ya que es una pagina que no esta enfocada para su uso en tablets o moviles precisamente,

Hasta aquí todo bien, lo que pasa es que, teniendo la web ya hecha, ahora el cliente se le ha metido en la cabeza que quiere que se vea bien en tablets y moviles.

Pero claro la maquetacion, el css etc esta ya todo hecho.

Mi pregunta es si existe algun codigo jquery o javascript, no se, que escale la web, no que recoloque los elementos de la web, sino que escale la web entera ajustandose al tamaño de pantalla, este esta vertical o apaisada.

Con eso ya seria feliz, lo digo por que estoy buscando ya dos dias y encuentro codigos que no me terminan de funcionar del todo.

Gracias de antemano.

[Alexis88]

Échale una miradita a esto. Te recomiendo la número 20 de la lista.

Saludos

[mensajeescrito]

gracias alexis, se acerca bastante a lo que necesito.

Pero no exactamente.

No se como decirlo exactamente ya que no soy experto en jquery o javascript.

Seria un script que autodetectara el ancho de la pantalla y redimensionara la web a ese ancho, yasea tablet, movil o pantalla de pc, ya que los elementos ya estan colocados con css.

es como si se hiciera un zoom para hacerlo todo mas pequeño para adaptarlo al tamaño que sea.

[Alexis88]

Échale un vistazo a este plugin que hice. Ojalá y sea lo que buscas.

Saludos

[mensajeescrito]

Gracias alexis, es muy interesante el plugin que me has enlazado.

Pero antes de que pusieras este plugin tuyo, he andado buscando y modificando algo de codigo y al final a salido el siguiente codigo que te pongo y que me funciona casi casi.

Mira, en el index pongo esto:

Primero para centrar el div que contiene toda la pagina:

Código Javascript:

$(document).ready(function(){
 
     $(window).resize(function(){
 
          // aquí le pasamos la clase o id de nuestro div a centrar (en este caso "caja")
          $('#cont_escalable').css({
               position:'absolute',
               left: ($(window).width() - $('#cont_escalable').outerWidth())/2
          });
       
    });
 
// Ejecutamos la función
$(window).resize();
 
});
 

Despues el codigo que cambia de zoom segun el ancho del navegador:

Código Javascript:

window.addEventListener("orientationchange", function() {
 
    // Hacer algo cuando cambia la orientación
    if(window.screen.availWidth == 1680)window.parent.document.body.style.zoom="100%";  
    if(window.screen.availWidth == 1280)window.parent.document.body.style.zoom="100%";
    if(window.screen.availWidth == 1024)window.parent.document.body.style.zoom="100%";
    if(window.screen.availWidth == 800)window.parent.document.body.style.zoom="100%";
    if(window.screen.availWidth == 768)window.parent.document.body.style.zoom="90%";
    if(window.screen.availWidth == 600)window.parent.document.body.style.zoom="52%";
    if(window.screen.availWidth == 480)window.parent.document.body.style.zoom="30%";
    if(window.screen.availWidth <= 320)window.parent.document.body.style.zoom="25%";
    
    //alert(window.orientation);
    }, false);
 

En un ordenador fijo se ve bien, ya sea una pantalla de 1024px, 1680px o mas.


Pero cuando se trata de tablets se ve regular, yo tengo una de 1024px por 600px,

Con android en ocasiones se ajusta en vertical y horizontal correctamente y en otras ocasiones sale mas grande del tamaño de pantalla.

Y no se por que sucede esto, es como si a veces detectara el codigo y otras no.


Con firefox lo que sucede es que se ve bien en una tablet de ancho 1024px pero mas grande que la pantalla cuando lo pongo la pantalla en vertical con 600 px de ancho.


Con google crome la web me sale muy grande mas que el tamaño de pantalla, tanto en horizontal como en vertical.



¿Que le falta al codigo para que sedetecte correctamente, tanto en horizontal como en vertical, en cualquier navegador de la tablet?


la web es:

http://www.desarrollosformativos.com/

[Alexis88]

Te vuelvo a sugerir que pruebes con lo que te pasé, puedes probarlo acá. Lo probé en PC y móvil y se adapta incluso cambiando la vista de vertical a horizontal en el móvil. Ahora que si deseas, puedes ver plugins más avanzados en este sitio.

Saludos