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

   
Vista:

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

Publicado por Sam (95 intervenciones) el 18/08/2014 09:51:26
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.
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder

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

Publicado por Sam (95 intervenciones) el 19/08/2014 12:10:00
Acabo de encontrar codigo javascript que he modificado para adaptarlo al problema que tengo y este es el resultado:


Primero para centrar el div que contiene toda la pagina:

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


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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script>
 
    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);
 
</script>


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 se detecte correctamente, tanto en horizontal como en vertical, en cualquier navegador de la tablet?


la web es:

http://www.desarrollosformativos.com/



Como digo, mi impresion es que en ocasiones detecta el codigo y otras no debido al navegador usado en ese momento y al giro de 90 grados que se le de al movil o tablet. que es lo que hace que a veces detecte el codigo y otras no.

Y claro ese es el problema que debe detertarse el codigo segun el navegador o el giro.

Gracias de antemano a todos.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de txema

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

Publicado por txema (18 intervenciones) el 20/08/2014 00:37:12
Hola Sam:

El tema que planeas es, actualmente, el planteamiento de todos los diseños actuales. Lo que te pide tu cliente es lo que todos queremos y pretendemos hacer.

La magia de javascript o de jQuery no existe. Se trata de CSS vs estilos (que en algún modo planteas con jQuery para modificarlos pero con soluciones deficientes). Estamos obligados a ser artesanos.

Plantéate el diseño adaptativo (responsive design).

Posiblemente sea útil todo tu HTML (PHP incluido) pero tendrás que trabajar a full el CSS. ¿Cómo?: básicamente:
1
2
3
4
5
6
7
8
9
10
@media all and (min-width: 980px){
/* estilos para pantalla de 1024 px*/
}
@media all and (min-width: 769px) and (max-width: 979px){
/* estilos para pantalla entre estas dimensiones (considerando en no llegar a la barra de desplazamiento horizontal*/
}
/* Hasta llegar a */
@media all and (max-width: 480px){
/* Se supone que es el tamaño del smartphone en vertical, o tal vez 320px que corresponden al formato mínimo horizontal. Pero a estas alturas todo es porcentual. */
}
No te asustes. Casi todo se repite pero hay que cuidar los anchos y, en tamaños reducidos, la estructura (lo que iba en horizontal, ahora habrá de ubicarlo uno debajo de otro.

Una cita que, en este contexto es genérica:

"Las webs para móviles van a dejar de existir.

El que no quiera darse cuenta de ello es que está cerrando los ojos. Hace ya muchos años, las webs diseñadas expresamente para móviles fueron toda una novedad, pero con la llegada del diseño web adaptable, todo cambió.

¿Quién no quiere o quién no tiene a día de hoy una página web totalmente responsive, que sea adaptable a móviles y tabletas?

El diseñar dos páginas webs en vez de una con una estructura adaptable a día de hoy es una total pérdida de tiempo y una práctica totalmente en desuso. De hecho, el 90% de las webs que diseñamos durante el pasado 2013 fueron responsives. Sólo un 10% de nuestros clientes nos solicitaron páginas webs no adaptables."
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

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

Publicado por Sam (95 intervenciones) el 20/08/2014 08:52:39
Txema, gracias por contestar, te comento:

Cuando este cliente llego a mi para que le hiciera una pagina web, resulta que dicha web debe estar enfocada a hacer cursos de manera online, con ello quiere decir que debes elegir el curso y estudiarte el temario con el contenido de cada tema del curso desde la misma web, y no son precisamente dos lineas de texto, estamos hablando de contenido de temas para estudiar y posteriormente examinarse haciendo un tipo test, tambien desde la web.


El asunto es que desde el primer momento me di cuenta que esta pagina nadie la iba a usar para este menester desde un movil, y si me apuras ni si quiera desde una tablet de manera tactil, y mucho menos nadie se iba a estudiar el temario de un curso desde una pantalla tan pequeña como la de un movil. A no ser con una lupa.


Asi que por ello descarte el responsive design para moviles y tablets y me comprometi con el cliente a que, si , se veria correctamente en todo tipo de tamaños de pantallas, pero ojo, de ordenadores fijos de sobremesa.


Y esto ultimo si se ve correctamente, incluidos pantallas de portatiles.


Bien dicho esto, pasado el tiempo y estado ya su web ya toda practicamente hecha, ahora me viene diciendo que como a un amigo suyo, otras personas le estan haciendo a ese amigo una web "responsive design", pues que el quiere lo mismo.

Decir que a su amigo, si, que necesita que su web se vea bien en moviles y tablets , por la naturaleza de su proyecto, si, es obligatorio que se vea bien en estos dispositivos.


Pero en la de mi cliente lo veo absurdo, ningun cliente en su sano juicio hara uso de su web para estudiar nada.


Por eso estoy apañado o intentando apañar algo con javascript y /o jquery + css



Nota: decir que no creo que haya que saber programacion o diseño para que si quieres que tu web se vea en moviles y tablets me lo hubiera dicho desde el principio y no me lo dijo.

Yo opte por lo que creia mas sensato y practico.



Tu que opinas de todo esto? , que me aconsejas txema?, me ayudaria mucho que me aconsejaras algo sobre que rumbo tomar, es que aplicar css ahora es muyyyyyy tedioso aplicarselo a toda la web que son un monton de paginas y encima gratis :-(

la web es esta:

www.desarrollosformativos.com
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de txema

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

Publicado por txema (18 intervenciones) el 20/08/2014 11:46:38
Cabe deducir que corresponde a ese 10 % que no merece la pena pasarla a responsive.

Y muchas veces es difícil convencer al cliente, sobre todo cuando ha visto realizado su trabajo y quiere más, aunque sea innecesario.

Como te decía anteriormente, las soluciones de adaptación de estilos a través de javascript no me gustan excepto que sean estrictamente necesarias o sean consecuencia de la ejecución de funciones.

Aparentemente el código al que haces referencia haría eso: mostrarle la página de forma diminuta .
La única observación sería el cambiar los == por >= (excepto el úlñtimo) y los if (excepto el primero) por else if para que tome la ventana mayor posible.

No es fácil decirle que no al cliente. Tal vez (se me ocurre) haciéndole una muestra de un tema o un curso y mostrándole que no es práctico el resultado para su web. O enfrentarte a él con un nuevo proyecto de horas de trabajo que tendrás que sumar al desarrollo de la web y tienen su merecido costo.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

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

Publicado por sam (95 intervenciones) el 20/08/2014 20:05:58
Muchas gracias por aclararme las ideas :-)
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar