Diseño responsive

lxn_ #1 Jun '14

Hasta ayer no había tocado absolutamente nada de este tema y realmente parece bastante intuitivo, he puesto un par de @media en mi css y la web va cogiendo el aspecto deseado al reducir, sin embargo me he llevado un chasco bastante gordo a la hora de la verdad.

Durante las pruebas he usado la vista de responsive integrado en Firefox para ver como quedaría la web en distintas resoluciones, todo correcto, pero a la hora de visualizarlo con el teléfono todo aparece mucho más grande y lógicamente se descuadra.

Tengo esta etiqueta en el html: <meta name="viewport" content="width=device-width, initial-scale=1.0"> que se supone sobrescribe el comportamiento natural del navegador móvil y le pone como width los píxels horizontales del teléfono, sin embargo como digo el resultado es muy distinto al del diseño responsivo de FF.

eXtreM3 #2 Jun '14

Diría que es porque los píxeles no se interpretan igual. Cuando haces un css responsive tienes que poner todo en % o en em.

Te pongo a modo de ejemplo una "plantilla" que hice por gusto hace poco con responsive integrado, para que bichees el código si quieres

http://carlosizquierdo.es/wedding/

2 8 respuestas

DarkSoldier #3 Jun '14

#2 la conseguiste vender alguna vez? recuerdo que querías venderla no? xD

1 respuesta

eXtreM3 #4 Jun '14

#3 deja de perseguirme por todos los hilos macho xD No, no la puse a la venta al final, just 4 fun!

pd: <3

1 respuesta

DarkSoldier #5 Jun '14

#4 coño no te persigo pero solo entro en /dev xDD

Merkury #6 Jun '14

#1 No sabría decirte exactamente porque peta, pero posiblemente sea un tema del navegador que uses en el movil, no todos estan adaptados a las funcionalidades de CSS3 y las media queries.

#2 Eso del % o em no es cierto y por cierto esa plantilla no es responsive ni de lejos

4 respuestas

B

[Borrado] #7 Jun '14

#6: A mi si me va el responsive de #2

1

palotex #8 Jun '14

#6 Se ha olvidado de los móviles con resolución inferior a 320px

1

eXtreM3 #9 Jun '14

#6 tendrás algo raro forzao, métete con el móvil y verás.

Ah no, eso, que menos de 320px no está contemplao xD, de ahí a decir "no es responsive ni de lejos" hay un trecho.

bazoo #10 Jun '14

#2 Usando la emulación de Chrome va en algunos dispositivos pero en otros no.

DarkSoldier #11 Jun '14

#6

2 respuestas

eXtreM3 #12 Jun '14

#11 si abres chrome en modo de incógnito te deja redimensionar la ventana a valores menores de 320 y mi css no tiene contemplado el min-width 320. Pero vaya que me la sopla, era a modo de ejemplo, no sé a qué viene tanto revuelo con que la web no se ve bien en resoluciones menores de 320px xD

1 respuesta

palotex #13 Jun '14

#11 Se refiere a que si la pantalla da menos de 320px no hay ninguna media-querie que recoja ese tamaño... tan fácil como en la línea 382 del style.css eliminar " and (min-width: 320px)"

#12 va cambialo y así descansamos

lxn_ #14 Jun '14

Gracias por las respuestas, he echado un ojo a tu ejemplo #2 y el comportamiento parece muy similar a lo que estoy tratando de hacer, pero veo que ocurre lo mismo, en Firefox le pongo resolución de 560p de ancho y se ve mucho más espacio, como si hubiese más píxeles cuando deberían ser los mismos que en el móvil http://imgur.com/VQURsY4,wOlXhLP,SXh9vsu#0

2 respuestas

eXtreM3 #15 Jun '14

#14 en esas capturas, obviando la 1ª que es con Opera y renderiza las fuentes como le sale a él de ahí.

En la 2ª (móvil) tienes 540px de ancho y en la 3ª (firefox) tienes 640px, es normal que se vea diferente!

Échale un ojo a esto: Pixel device ratio

1 respuesta

palotex #16 Jun '14

#14 igual te arroja algo de luz en Firefox: Ctrl + Shift + M
espero que te sirva el visor

1 respuesta

lxn_ #17 Jun '14

#15 Vaya, no tenía ni idea de que hacían ese reescalado, gracias, la idea entonces es que llegue por lo menos hasta los 320p (5s) sin romper la estructura, ¿no?

#16 Sí sí lo estoy usando

1 respuesta

thelegend #18 Jun '14

Mirate esto
http://www.mediavida.com/foro/dev/tutorial-bootstrap-para-principantes-487865

eXtreM3 #19 Jun '14

#17 hace dos semanas asistí a unas charlas sobre web mobile aquí en Granada, y hubo una frase por parte de uno de los miembros de Adobe que se me grabó a fuego:

No se puede pretender que una web (o una app) se vea exactamente igual en todos los dispositivos, sino lo mejor que se pueda en cada uno de ellos.

En el emulador de Chrome puedes seleccionar los dispositivos, y cuando lo haces, te pone debajo el device pixel ratio, verás que es diferente en cada dispositivo. Verás también, que en el Nexus 4 se ven más pequeñas las cosas que en el Nexus 5, a pesar de tener menos resolución, 1280x720 vs 1920x1080, el Nexus 4 tiene 2 de dpr y el Nexus 5 tiene 3.

1 respuesta

Kiroushi #20 Jun '14

¡Me mondo!

Después de leer a #2 echar bilis por la boca en:

http://www.mediavida.com/foro/dev/etiquetas-semanticas-de-html5-512767#19

Resulta que hace una plantilla "a mano" y le da la forma y distribución calcada a BS o Foundation, pero encima el responsive funciona mal xDDD

Oh, the irony.

1 respuesta

eXtreM3 #21 Jun '14

#20 sí sí, un css tirao desde 0 es sin duda calcado a bootstrap jajajajaja, por favor. El responsive funciona mal? Oh, perdona por no contemplar resoluciones inferiores a 320 en una web que hice en una tarde sólo por gusto.

Sólo pretendía ayudar a #1 , tanto con mi web de ejemplo como con lo del device pixel ratio. Los que me criticáis os podéis ir a tomar por culo, sin más.

1 respuesta

Kiroushi #22 Jun '14

#21 ¿De verdad me estás diciendo que tu web de #2 no es calcado a un onepager de bootstrap? Me lol mi señor, con su afirmación:

#14 aún no entiendo por qué los frameworks se han extendido tanto. Ahora todas las putas webs son iguales con el bootstrap de los cojones.

Podrías al menos haber puesto alguna transición o un poco de efecto parallax... pero es que ni eso.

1 respuesta

lxn_ #23 Jun '14

Pues nada estupendo, muchas gracias #19, ni sabía de la existencia del emulador de móviles de Chrome

Trataré de romperme la cabeza para aprender como se hace esto de 0, más adelante posiblemente sí que opte por frameworks (o en esta en caso de emergencia claro jaja)

eXtreM3 #24 Jun '14

#22 pero qué cojones me estás contando? Si hago un foro y en el menú pongo Portada, Foro, Grupos ya he hecho un foro calcado a mediavida? Tócate los cojones Andrés. En serio, si no vas a aportar nada vete a tomar por culo por donde has venido. No entiendo por qué ese afán tan gratuito de desvirtuar los hilos que tenéis algunos.

1 respuesta

Merkury #25 Jun '14

#24 yo en mi primera respuesta era solo por picarte haha.

La plantilla esta bien y es una buena manera de practicar el responsive design. De todas formas también para desarrollar paginas responsives el uso de frameworks como BS o Modernizr te hacen la vida mucho mas fácil.

gonya707 #26 Jun '14 Moderador

Chicos haya paz. Voy a hacer como que no he visto ambos reportes cruzados por esta vez.

No provoqueis ni lleveis los hilos a discusiones personales, si teneis algún problema discutidlo entre vosotros.

1

R4ven #27 Jun '14 Inocente

Pues yo agradezco a #2 el aporte, no se por qué tanta ansia con meterse con gente que aporta cosas

Diseño responsive

Usuarios habituales

Tags