Foros del Web » Creando para Internet » HTML »

Etiqueta Viewport

Estas en el tema de Etiqueta Viewport en el foro de HTML en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 19/12/2012, 12:13
 
Fecha de Ingreso: enero-2012
Ubicación: Granada
Mensajes: 287
Antigüedad: 7 años, 10 meses
Puntos: 11
Etiqueta Viewport

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?
__________________
Castro Rodríguez Abogados
  #2 (permalink)  
Antiguo 19/12/2012, 13:03
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 12 años, 4 meses
Puntos: 1567
Respuesta: Etiqueta Viewport

mirá este video, quizás te aclare el panorama
http://www.youtube.com/watch?feature...&v=OP2GnAFeFTY
Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #3 (permalink)  
Antiguo 20/12/2012, 14:29
 
Fecha de Ingreso: enero-2012
Ubicación: Granada
Mensajes: 287
Antigüedad: 7 años, 10 meses
Puntos: 11
Respuesta: Etiqueta Viewport

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
__________________
Castro Rodríguez Abogados
  #4 (permalink)  
Antiguo 24/12/2012, 22:20
Avatar de Tedel  
Fecha de Ingreso: enero-2011
Ubicación: Lima
Mensajes: 2.744
Antigüedad: 8 años, 10 meses
Puntos: 444
Respuesta: Etiqueta Viewport

¿estás usando media queries en el CSS?
__________________
Soy el autor de Heptagrama y tengo un servicio "todo incluido" de marketing web.
  #5 (permalink)  
Antiguo 04/01/2013, 07:36
 
Fecha de Ingreso: agosto-2012
Mensajes: 23
Antigüedad: 7 años, 3 meses
Puntos: 2
Respuesta: Etiqueta Viewport

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
  #6 (permalink)  
Antiguo 04/01/2013, 10:46
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.483
Antigüedad: 17 años, 3 meses
Puntos: 2111
Respuesta: Etiqueta Viewport

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.
  #7 (permalink)  
Antiguo 08/01/2013, 07:19
Avatar de el_java  
Fecha de Ingreso: enero-2008
Mensajes: 185
Antigüedad: 11 años, 10 meses
Puntos: 3
Respuesta: Etiqueta Viewport

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
__________________
La Mejor banda de Rock Chileno : Los Bunkers
  #8 (permalink)  
Antiguo 09/01/2013, 07:16
Avatar de Tedel  
Fecha de Ingreso: enero-2011
Ubicación: Lima
Mensajes: 2.744
Antigüedad: 8 años, 10 meses
Puntos: 444
Respuesta: Etiqueta Viewport

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.
__________________
Soy el autor de Heptagrama y tengo un servicio "todo incluido" de marketing web.
  #9 (permalink)  
Antiguo 09/01/2013, 07:28
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.483
Antigüedad: 17 años, 3 meses
Puntos: 2111
Respuesta: Etiqueta Viewport

Cita:
Iniciado por Tedel Ver Mensaje
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.

Etiquetas: etiqueta, página, formulario
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 02:28.