Etiqueta Viewport

[castrorodriguez]

Hola a todos,
Me gustaría preguntaros sobre laetiqueta viewport que según he leído hace que una web se adapta al ancho del dispositivo móvil haciendo que se reduzca o amplíe el ancho de la web hasta adaptarse al ancho del dispositivo móvil, según ese artículo se recomienda utilizar los siguientes atributos en dicha etiqueta:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

Con una web móvil que hice de prueba de 320x480 (medidas del Iphone)px se ajusta bien en dispositivos de 400 px de ancho pero he comprobado que en un móvil Samsung Galaxy Note que tiene una resolución de 800x1280, el anocho de esa página no se adapta con el viewport al ancho de ese móvil, sobrando por la derecha un trozo en blanco.

¿Hay que configurar esa etiqueta de otra forma?

[emprear]

mirá este video, quizás te aclare el panorama
http://www.youtube.com/watch?feature...&v=OP2GnAFeFTY
Saludos

[castrorodriguez]

Gracias Emprear por ese video.

En ese video se recomienda utilizar
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"/>

Con ello se ajusta la web al ancho de pantalla y además dehabilita la opción de escala para que el usuario no pueda hacerla ni más grande ni más pequeña.

Si te fijas esta instrucción es la misma que la que puse arriba, el atributo noscalable es igual que decir maximun y intial = 1

Por eso no entiendo por qué con esta meta no se adapta a un móvil de 800px de ancho, no sé donde está el fallo.

Saludos

[Tedel]

¿estás usando media queries en el CSS?

[manueltg]

Yo tengo la misma duda que tú, según he investigado el viewport con el iPhone funciona a la perfección pero cuando se trata de Android ya no trabaja tan bien. Yo estoy desarrollando una webApp con PhoneGap y no consigo que la propia aplicación se adapte al tamaño de cada pantalla. A ver si alguien nos lo aclara.

Un saludo

[pzin]

manueltg en la página de desarrolladores de Android recomiendan usar viewport en su guía de buenas prácticas (inglés). No creo que recomienden su uso y luego de fallos. Seguramente sea algún error de maquetación que estés cometiendo.

viewport no hace magia, sólo ajusta el zoom y el marco visible. Si tienes una imagen que es demasiado grande o un elemento con un ancho fijo que no has considerado cambiar en tus reglas media queries o cualquier otra historia se descoloca algo y/o todo. Una cosa que he visto de mucha gente es que no tienen en cuenta el modelo de caja y por ahí ocurren los fallos. Bueno, no mucho, pero alguna que otra vez sí lo he visto.

No tengo Android así que no puedo hacer pruebas. Lo que sí ocurre bastante es que los resultados en simuladores no son los mismos que en los dispositivos físicos. De hecho ayer me pasó algo así con el simulador de iPhone —el que viene con Xcode, que se supone el mejor.

Por otro lado, puede incluso que sea cosa de PhoneGap —igual digo una burrada, no lo he usado, pero puede ser.

Otro enlace acerca de esto en Android: http://developer.android.com/guide/w...targeting.html
Es un poco más de lo mismo que el vídeo que enlazó emprear.

[el_java]

Se que no tiene nada que ver...
Pero en el video que pusieron de Youtube...

Aparece desarrollando en Dreamweaver con vista previa a un SmartPhone

Existe plugin para eso?
o es solamente un efecto visual que hicieron al crear el video? :P

[Tedel]

Te lo aclaro: <meta viewport> requiere el uso de @media {} en el CSS de la aplicación. Si no hay eso no encontrará cambios que realizar.

[pzin]

Iniciado por Tedel

Te lo aclaro: <meta viewport> requiere el uso de @media {} en el CSS de la aplicación. Si no hay eso no encontrará cambios que realizar.

Una afirmación un poco extraña. Una cosa es que se usen a la par, pero no tiene ninguna dependencia un metatag con reglas de CSS. Ni viewport te cambia nada respecto al CSS.