Ver Mensaje Individual
  #5 (permalink)  
Antiguo 19/08/2014, 03:50
mensajeescrito
 
Fecha de Ingreso: mayo-2012
Mensajes: 760
Antigüedad: 12 años, 6 meses
Puntos: 5
Respuesta: Escalar, adaptar una web segun el tamaño de pantalla

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:
Ver original
  1. $(document).ready(function(){
  2.  
  3.      $(window).resize(function(){
  4.  
  5.           // aquí le pasamos la clase o id de nuestro div a centrar (en este caso "caja")
  6.           $('#cont_escalable').css({
  7.                position:'absolute',
  8.                left: ($(window).width() - $('#cont_escalable').outerWidth())/2
  9.           });
  10.        
  11.     });
  12.  
  13. // Ejecutamos la función
  14. $(window).resize();
  15.  
  16. });


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

Código Javascript:
Ver original
  1. window.addEventListener("orientationchange", function() {
  2.  
  3.     // Hacer algo cuando cambia la orientación
  4.     if(window.screen.availWidth == 1680)window.parent.document.body.style.zoom="100%"; 
  5.     if(window.screen.availWidth == 1280)window.parent.document.body.style.zoom="100%";
  6.     if(window.screen.availWidth == 1024)window.parent.document.body.style.zoom="100%";
  7.     if(window.screen.availWidth == 800)window.parent.document.body.style.zoom="100%";
  8.     if(window.screen.availWidth == 768)window.parent.document.body.style.zoom="90%";
  9.     if(window.screen.availWidth == 600)window.parent.document.body.style.zoom="52%";
  10.     if(window.screen.availWidth == 480)window.parent.document.body.style.zoom="30%";
  11.     if(window.screen.availWidth <= 320)window.parent.document.body.style.zoom="25%";
  12.    
  13.     //alert(window.orientation);
  14.     }, 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/