[SOLUCIONADO] css para móviles

[botigues]

Hola estoy adaptando una web para móvil y al ser la primera vez nose muy bien como hacerlo. Lo que hago es el siguiente:
-Tengo una sola estructura html tanto para pc como para móviles
-mediante un php detecto si el dispositivo es móvil o no, y cargo un css o otro
-En el css para móviles las medidas las tengo con "em" para que coja el tamaño de la pantalla.

Mi problema está en que cuando el móvil está en posición vertical, todo correcto. Peró cuando está en posición horizontal el tamaño de los objetos se amplia ( a causa que el width es más grande) y entonces se ve demasiado grande.

Como puedo hacer para que no me cambie de tamaño en las diferentes orientaciones del movil?

[pzin]

Bienvenido al foro.

Tendrás que mirar algo acerca de Responsive Web Design.

No hace falta que detectes si se entra con un dispositivo móvil o no, sino diseñar según la resolución de pantalla.

[botigues]

Tengo que programarlo todo en pixels y en vez de detectar si es un móvil poner en el css los "media" para las resoluciones que yo quiera?

[pzin]

Más o menos.

Ten en cuenta que todo se hereda. Realmente con los media-queries vas a ajustando el diseño. Lo ideal es siempre empezar diseñando para resoluciones pequeñas, y a partir de ahí seguir hacia arriba. Mobiel first, que le llaman.

[botigues]

Vale perfecto. Muchas gracias!! Para próximas webs lo tendré en cuenta ya :)

Un placer estar en este foro!!

[botigues]

Hola, estube probando lo que me digiste.

Tengo un css con todas las medidas en px ( menos los objetos que ocupan toda la pantalla que estan en %).

No entiendo porque si los objetos tienen una altura fijada en px, con el móvil vertical se ve bien y cuando lo pongo horizontal esa altura augmenta. Mi intención es que no augmente nada y que todo se quede con la misma medida (solo tiene que augmentar los div que ocupan toda la pantalla, peró todo lo de dentro el div se tiene que quedar igual)

Eso seria lo normal no? Es possible o soy yo que lo hago mal?

[pzin]

¿El nivel de zoom cambia al cambiar la orientación?

En principio creo que tendría que verse igual si, pero luego todo depende. Por el enlace al menos para poder ver algo.

Trabajar con medidas fijas hoy en día no es buena cosa.

[botigues]

Hola, el nivel de zoom no augmenta.

Lo que yo quiero es que se vea la misma medida tanto en vertical como en horizontal. En vertical ocuparà la pantalla completa y en horizontal quedarà centrado al medio.

Lo que yo hago es el siguiente:
- en el header calculo el width de la pantalla con jquery ( var midaWidth = $(window).width()-130; )

- lo assigno en el div "content" ($("#content").css('width', midaWidth); )

- de esta manera en vertical se ajusta el contenido a toda la página

El problema es que en horizontal no respeta esa medida y me lo augmenta mucho. Como si al ponerlo en horizontal por defecto el contenido augmentara. Eso es normal? no tendria que coger la misma medida ? o quizás es algo de mi codigo que lo hace augmentar?

[pzin]

Es que no sé si quieres que tengan la misma medida, es decir, que midan por ejemplo 300 pixeles, o que la medda sea relativa al ancho de la pantalla, por ejemplo, 80%.
Es que a veces parece que te contradices.

Si quieras que midan lo mismo, usa pixeles, si necesitas que sean relativos al tamaño de la pantalla, usa porcentajes.

[botigues]

Perdona si no me explico bien o si te estoy liando.

Lo que quiero es que el "content" tenga la misma medida en las 2 orientaciones. Por eso lo calcula con jquery y lo pongo en "px". Mi sorpresa está en que en horizontal se ve más grande que en vertical. Y nose si es algo por defecto o es que estoy haciendo mal alguna cosa.

[pzin]

Si quieres que midan lo mismo, ¿qué necesidad tienes de calcularlo con JavaScript? ¿Qué te impide poner una medida en pixeles y ya está? No entiendo esta parte la verdad.

Otra cosa, al cambiar la orientación, seguirá midiendo lo que se haya calculado con JavaScript, no lo volverá a calcular. Para tendrías que indicar que al cambiar el ancho de la pantalla se vuelva a calcular.

Creo que te estás liando, usando JavaScript cuando no haría falta si usases media-queries.

[botigues]

El javascript lo uso porque cada móvil tiene una resolución diferente y asi podia saber los pixeles del content (tanto en vertical como en horizontal). Peró quizas si me estoy liando mucho asi. Intentaré hacerlo con medias.

Gracias crac!! ;)

[pzin]

Ah. Pero entonces no quieres que tenga una medida fija, sino relativa al ancho de la pantalla.

En ese caso trabaja con porcentajes. No te hacen falta ni media-queries.

[botigues]

Hola, he estado probando en mis ratos libres y aun no he podido descubrir el problema.

Tengo el css sin media querys y no entiendo lo que me pasa.

Lo que quiero es que al poner la orientación horizontal del móvil, el "content" ( y todos los elementos que ocupan el 100% del "content") se alarguen a la pantalla horizontal del móvil.

PERO... todos los div, tipos, etc que tengan medida fija (pixels) se queden en el mismo tamaño.

Ahora mismo tengo todas las medidas con "px" y solo el "content" esta en %. Y cuando pongo el móvil horizontal me aumenta todo :S

Porque me pasa eso? es normal? Un ejemplo de lo que quiero es la siguiente web: http://www.sennep.com

Mi web no la puedo poner porque no tengo servidor aun

Gracias adelantadas por ayudarme :)

[pzin]

Pues es mejor que vayas poniendo tu código HTML/CSS.

Entiendo que lo que quieres hacer es que los elementos se ajusten al tamaño de la pantalla. Es que aún sigues diciendo que ocupen lo mismo y otras veces que se ajusten. Pero bueno, primero pon el código a ver.

[botigues]

A ver, quizas no me explico bien. Pero es que hay elementos que quiero que ocupen toda la pantalla (%) y elementos que no cambien (px)

Un ejemplo es el siguente:

#header{
background-color: #ededed;
height: 160px;
position:fixed;
top:0px;
z-index: 20;
width:100%;
}

#header .logo{
width: 400px;
height: 80px;
float:left;
margin-top: 5px;
}


-El header quiero que se alargue a toda la pantalla ( eso funciona)
- El logo tienen que tener la misma medida en vertical y horizontal. En cambio en horizontal se agranda. Es como si al aumentarse el header por defecto se aumenta el logo tambien :S

[pzin]

¿Y tienes indicado un viewport y ajustes para el zoom? Yo creo que lo que pasa es que simplemente está haciendo un zoom el dispositivo.

[botigues]

mmm no no tengo nada de eso. Al ser la primera web que hago para movil no sabia nada de ese metatag. Por lo que veo es muy necessario en webs para moviles no?

bueno muchas gracias por ayudarme a solucionarlo :) perdon por el error de novato pero no lo sabia jejeje