Diseño Web: La etiqueta viewport para diseño móvil

Por /

La importancia de la etiqueta viewport en los nuevos diseños Web

La etiqueta meta para el viewport fue introducida por Apple en Safari para móviles, para ayudar a los desarrolladores a mejorar la presentación de sus aplicaciones web en un iPhone, iPod Touch o iPad.

La etiqueta viewport nos permite a los que construimos sitios web o web apps, definir el ancho, alto y escala del área usada por el navegador para mostrar contenido.

Al fijar el ancho o alto del viewport, los desarrolladores podemos usar un número fijo de pixeles o usar dos constantes, device-width y device height respectivamente.Se considera una buena práctica configurar el viewport con algunas de estas dos constantes, en vez de un ancho o alto fijo. Muchos desarrolladores caen en el error de configurar el viewport con un width de 320, siendo este el ancho del iPhone. Utilizando las constantes, se verá de mejor forma no solo en el iPhone sino que en muchos “mobile browsers” más. A continuación la configuración más común de una etiqueta meta, para introducir dentro del head de tu mobile web app:

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

Recomendamos el libro relacionado con desarrollo web,  Programming the Mobile Web\"\", donde se puede leer mucho más de la mobile web y web apps.

 Podéis consultar el sitio Mobile HTML5, que ayuda a entender la compatibilidad de HTML5 en navegadores mobile y tablets .

rafa villaplana
Rafa Villaplana
SEO Manager en Rafa Villaplana | Web | + posts

Más de 10 años trabajando en proyectos SEO donde he conseguido aumentar las ventas a +100 empresas en más de 10 sectores distintos.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Scroll al inicio