Mostrar Sitios para Móviles en Escala Correcta Con Viewport - Revolución Móvil

8/7/2014
Mostrar sitios para mviles en escala correcta con viewport - Revolucin mvil
Mostrar sitios para mviles en escala correcta

con viewport
(http://revolucion.mobi/2012/02/14/mostrarsitios-para-moviles-en-escala-correcta/)
Por: Carlos Solis (https://plus.google.com/112524545153071242215?rel=author) | 14/02/2012
Prcticamente todos los navegadores de smartphones al entrar a un sitio analizan el

tamao total y lo escalan para que se muestre completo en la pantalla, este
procedimiento genera muchas veces resultados incorrectos y dolores de cabeza para
los desarrolladores para web mvil (http://revolucion.mobi/category/web-movil).
Por ejemplo la imagen que se muestra a continuacin tiene un grfico que mide 320
pixels al igual que la pantalla del device, sin embargo, el grfico aparece con un
tamao muy inferior a causa del efecto de escala automtica.
http://revolucion.mobi/2012/02/14/mostrar-sitios-para-moviles-en-escala-correcta/
1/12
8/7/2014
(http://revolucion.mobi/wp-content/uploads/2012/02/Screen-Shot-2012-02-13-at1.09.40-PM.png)
Esta es una conducta normal del navegador, pero cuando estamos construyendo una
versin mvil del sitio (http://revolucion.mobi/category/web-movil/) o una aplicacin
phoneGap (http://revolucion.mobi/category/phonegap/) puede generar problemas
para diagramar un sitio que se vea consistente en todas las plataformas. La
escala automtica se puede prevenir y controlar de forma muy sencilla utilizando el
atributo viewport. Vamos a revisar a profundidad esta til tcnica.
Insertar el viewport
El viewport es un atributo del tag <meta> que debe incluirse entre las etiquetas <head>
de un documento HTML , siguiendo este patrn bsico:
Cdigo:
<!DOCTYPE html>
<html lang="es">
<head>
<head>
<title> Tamao adaptado a un mvil </title>
<meta name="viewport" content="width=device-width"/>
</head>
<body>
<h1>Contenidos del Documento </h1>
2/12
8/7/2014
</body>
</html>
Con solo agregar estas lneas de cdigo al documento del ejemplo

(http://revolucion.mobi/ejemplos/html5/viewport/documento_viewport_basico.html),
se mostrar a escala correcta en la pantalla de un equipo mvil:
Configurando el Viewport
3/12
8/7/2014
El viewport es el rea visual en la cual mostramos un documento HTML y podemos

manipular esta caracterstica para controlar como mostrarlo en la pantalla de
un mvil. Utilizando sus atributos podemos configurar elementos como el ancho, alto,
tamao y escala. A continuacin la lista completa de propiedades del viewport:
(http://revolucion.mobi/wpcontent/uploads/2012/02/viewport_table_revolucion.mobi_.png)
4/12
8/7/2014
Dimensiones
Es posible definir un tamao especifico para el rea visible del documento, muchos
sitios toman el camino rpido y ajustan el viewport a 320 px para ajustar el aspecto al
display vertical de un iPhone (http://revolucion.mobi/tag/iphone), usando
un cdigo similar a este
Cdigo:
<meta name="viewport" content="width=320"/>
Pero, con la enorme fragmentacin de equipos y tamaos de pantalla, definir un

tamao especifico como en el ejemplo anterior
(http://revolucion.mobi/ejemplos/html5/viewport/documento_viewport_320px.html)es
una mala practica que puede mostrar resultados incorrectos en algunos equipos o
cuando el dispositivo cambia de posicin, afortunadamente podemos configurar el
viewport para ajustarse dinmicamente al tamao de cada dispositivo usando el
atributo device-width que es equivalente al 100% del ancho de la pantalla
del dispositivo, independiente de su tamao, posicin o resolucin:
Cdigo:
<meta name="viewport" content="width=device-width"/>
5/12
8/7/2014
El alto de la pantalla tambin es configurable con las mismas propiedades a travs del
atributo height , aunque salvo condiciones muy especificas- no es necesario
definirlo. Esta propiedad se asignar automticamente a travs del scroll.
Escala
Tambin podemos controlar la escala de la vista con el atributo initial-scale. Por
ejemplo con este cdigo
(http://revolucion.mobi/ejemplos/html5/viewport/documento_viewport_escalado.html) el
sitio se mostrar al doble de su tamao original:
Cdigo:
<meta name=viewport content=width=device-width; initial-scale=2/>
6/12
8/7/2014
Es posible ademas, limitar el tamao al que se puede escalar el sitio con el atributo
maximum-scale . El siguiente ejemplo muestra el documento en escala correcta y
permite escalarlo hasta al doble de su tamao.
Cdigo:
<meta name="viewport" content="width=device-width, maximum-scale=2"/>
Por ultimo est el atributo user-scalable controla los permisos de escala del
documento,con el siguiente cdigo, el sitio se muestra en su escala original y no es
posible cambiar el tamao desde el dispositivo mvil.
Cdigo:
<meta name="viewport" content="width=device-width, user-scalable=no"/>
Importante mencionar que no se recomienda deshabilitar la opcin de escalar el

contenido
Viewport optimizado para mviles
7/12
8/7/2014
El atributo viewport permite muchas configuraciones, pero para asegurar

compatibilidad con la mayor cantidad de pantallas y navegadores mviles, se
recomienda utilizar este formato
(http://revolucion.mobi/ejemplos/html5/viewport/documento_viewport_recomendado.htm
como base:
Cdigo:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Conclusin
Los dispositivos mviles escalan automticamente los documentos HTML generando
en ocasiones resultados no deseados. Podemos controlar el rea visible de un
documento a travs del atributo viewport y sus propiedades.
La configuracin del viewport nos ser de gran utilidad tanto para la web
(http://revolucion.mobi/category/web-movil) mvil en HTML5
(http://revolucion.mobi/category/web-movil) como en aplicaciones basadas en
phoneGap (http://revolucion.mobi/category/phonegap). Se recomienda usar el
viewport optimizado para mviles para garantizar la compatibilidad con la mayor
cantidad de resoluciones y plataformas.
Los archivos con los diferentes ejemplos estn disponibles para descargar y probar.
[descargar ejemplos] (http://revolucion.mobi/wp-content/uploads/2012/02/ejemplosviewport-revolucion_mobi.zip)
8/12
8/7/2014
Acerca de Carlos Solis

(http://revolucion.mobi/author/siddhartaadmin/)
Adobe Community Professional, Blackberry Elite Developer y speaker
en diversos eventos en Amrica Latina. Docente universitario y
fundador del proyecto revolucion.mobi.
Es autor del "Manual del guerrero mvil" y un firme creyente del potencial de los
desarrolladores latinoamericanos.
Ms tutoriales
Tutorial: Configurar equipos Android para probar aplicaciones
(http://revolucion.mobi/2012/10/30/tutorial-configurar-equipos-android-para-probar-aplicaciones/)
Configurar Eclipse para Android en un solo paso

(http://revolucion.mobi/2013/01/22/configurar-eclipse-para-android-en-solo-paso/)
Crear aplicaciones para Firefox OS

(http://revolucion.mobi/2013/03/13/tutorial-crear-aplicaciones-para-firefox-os/)
20 Comentarios
Revolucion Movil
Ordenar por los mejores
Acceder
Compartir
Favorito
nete a la discusin...
George Doe
hace un ao
Me sirvio :)
3
Ricardo
Responder Compartir
hace 11 meses
Muchsimas gracias me sirvi mucho esta etiqueta, yo iba a redimensionar todos los elementos
por separado. Me ahorraste mucho trabajo. Saludos.
1
Responder Compartir
David Lara
hace un mes
9/12
8/7/2014
David Lara
hace un mes
Gracias, excelente aporte! Funcion correctamente.

Responder Compartir
GAS
hace 2 meses
Gracias amigo, gran tutorial :)

Responder Compartir
Jurian
hace 3 meses
Excelente, muy bien explicado!!!

Responder Compartir
jose
hace 3 meses
como puedo comprar el libro en Argentina....

Responder Compartir
Jose Luis Valentin Rodriguez
hace 6 meses
Gracias por tu aporte me sirvio mucho.

Responder Compartir
Roberth
hace 6 meses
Me encanto es muy bueno por lo general yo lo uso as <meta name="viewport"

content="width=device-width, initial-scale=1>">
Responder Compartir
Gro
hace 7 meses
super !!!--- muchas gracias muy bueno el articulo, me sirvio un monton

Responder Compartir
iva29234
hace 7 meses
Muchas gracias la verdad que sirve demucho para los que estamos empezando !!!!
Responder Compartir
Oscar Mena
hace 8 meses
Hola, estoy haciendo un juego en html5 para celular, hay algo para que salga a pantalla completa
pero solo el contenido, osea que quite las pestaas y tambien donde sale la url?
Responder Compartir
carlos
Moderador
Oscar Mena hace 8 meses
Oscar, puedes usar la API de fullscreen de HTML, mira este articulo
10/12
8/7/2014
http://www.sitepoint.com/html5...
Responder Compartir
Oscar Mena
carlos hace 8 meses
Bueno, espero poder aplicarlo a mi juego, muchas gracias.

Responder Compartir
Kevin Mamaqi
hace 8 meses
Gracias por el artculo, me ha venido muy bien.

Responder Compartir
Mario
hace 9 meses
Hola, esta informacin me ha sido muy valiosa para desarrollar mi pagina web mvil. Gracias y
muchos saludos desde Saltillo, Coahuila, Mxico.
Responder Compartir
mariano
hace 9 meses
Hola primero que nada un saludo desde argentina para toda la comunidad!
soy vendedor en MERCADOLIBRE y queria saber de que manera adaptar mis plantillas de ventas
(bsicas en html) a todos los dispositivos .
no soy programador, pero vi que en la parte de head de no hay ninguna meta . espero puedas
ayudarme. gracias, Mariano
Responder Compartir
Fernando
hace 11 meses
Excelente! no lo saba. A ponerlo en prctica. :)

Responder Compartir
Guest
hace un ao
OK GOOD
Responder Compartir
JSu
hace un ao
Hola!! y si estuviera trabajando mi sitio en joomla, igual me servira utilizar esa etiqueta?! y si fuera
as, en qu parte debera incluirlo?!
Responder Compartir
Erick Acevedo
JSu hace un ao
Hola JSu, dentro de las etiquetas <meta> del header.

Responder Compartir
11/12
8/7/2014
Responder Compartir
QU ES ESTO?
TAMBIN EN REVOLUCION MOVIL
Crear Aplicaciones con jQuery Mobile

10 comentarios hace un ao
isabel disculpe yo hice una aplicacin con el
jquery mobile pero quisiera saber como la

visualizo en mi celular, tengo que contratar
un hosting especial o algo por el estilo? espero
su respuesta y gracias
Configurar Eclipse para Android en un solo
VideoTutorial: Como instalar y probar

Google Maps en phoneGap
6 comentarios hace un ao
carlos cuando pruebas en un browser de
manera local vas a tener problemas en

algunos navegadores que no permiten acceso
a la API de geolocalizacion en documentos
locales, el codigo esta correcto y no va a
Novedades del Android Studio
Tutoriales Android (http://revolucion.mobi/category/android/)

Tutoriales Phonegap (http://revolucion.mobi/category/phonegap/)
Tutoriales iOS (http://revolucion.mobi/category/ios)
Foros (http://revolucion.mobi/forum/)
libros (http://www.amazon.com/Manual-Del-Guerrero-M%C3%B3vil-ebook/dp/B009G5Q60I/)
Cursos Online (https://www.udemy.com/test368/)
Contenido bajo licencia creative commons (CC) (http://creativecommons.org/licenses/by-nc-sa/3.0/deed.es_ES)
Suscribete al RSS (http://revolucion.mobi/feed/)
Recibe actualizaciones por correo (http://feedburner.google.com/fb/a/mailverify?uri=revolucionmobi&loc=es_ES)
Facebook Fanpage (http://www.facebook.com/pages/Revoluci%C3%B3n-M%C3%B3vil/151924791487422)
Google+ (https://plus.google.com/102940754725163737735)
Sguenos en Twitter (http://twitter.com/revolucion_mobi)
Sobre Carlos Solis (http://carlossolis.brandyourself.com/)
12/12

Mostrar Sitios para Móviles en Escala Correcta Con Viewport - Revolución Móvil

Загружено:

Сведения о документе

Исходное описание:

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Mostrar Sitios para Móviles en Escala Correcta Con Viewport - Revolución Móvil

Загружено:

Авторское право:

Доступные форматы

8/7/2014

Mostrar sitios para mviles en escala correcta

Prcticamente todos los navegadores de smartphones al entrar a un sitio analizan el

<title> Tamao adaptado a un mvil </title>

<meta name="viewport" content="width=device-width"/>

<h1>Contenidos del Documento </h1>

Con solo agregar estas lneas de cdigo al documento del ejemplo

El viewport es el rea visual en la cual mostramos un documento HTML y podemos

<meta name="viewport" content="width=320"/>

Pero, con la enorme fragmentacin de equipos y tamaos de pantalla, definir un

<meta name="viewport" content="width=device-width"/>

<meta name=viewport content=width=device-width; initial-scale=2/>

<meta name="viewport" content="width=device-width, maximum-scale=2"/>

<meta name="viewport" content="width=device-width, user-scalable=no"/>

Importante mencionar que no se recomienda deshabilitar la opcin de escalar el

El atributo viewport permite muchas configuraciones, pero para asegurar

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

Acerca de Carlos Solis

Configurar Eclipse para Android en un solo paso

Crear aplicaciones para Firefox OS

Ordenar por los mejores

Gracias, excelente aporte! Funcion correctamente.

Gracias amigo, gran tutorial :)

Excelente, muy bien explicado!!!

como puedo comprar el libro en Argentina....

Jose Luis Valentin Rodriguez

Gracias por tu aporte me sirvio mucho.

Me encanto es muy bueno por lo general yo lo uso as <meta name="viewport"

super !!!--- muchas gracias muy bueno el articulo, me sirvio un monton

Oscar Mena hace 8 meses

Oscar, puedes usar la API de fullscreen de HTML, mira este articulo

carlos hace 8 meses

Bueno, espero poder aplicarlo a mi juego, muchas gracias.

Gracias por el artculo, me ha venido muy bien.

Excelente! no lo saba. A ponerlo en prctica. :)

Hola JSu, dentro de las etiquetas <meta> del header.

TAMBIN EN REVOLUCION MOVIL

Crear Aplicaciones con jQuery Mobile

isabel disculpe yo hice una aplicacin con el

jquery mobile pero quisiera saber como la

Configurar Eclipse para Android en un solo

VideoTutorial: Como instalar y probar

carlos cuando pruebas en un browser de

manera local vas a tener problemas en

Novedades del Android Studio

Tutoriales Android (http://revolucion.mobi/category/android/)

Вам также может понравиться