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
SEO Manager en  | 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
rafa villaplana logo mobile
Powered by  GDPR Cookie Compliance
Resumen de privacidad

Esta web utiliza cookies para que podamos ofrecerte la mejor experiencia de usuario posible. La información de las cookies se almacena en tu navegador y realiza funciones tales como reconocerte cuando vuelves a nuestra web o ayudar a nuestro equipo a comprender qué secciones de la web encuentras más interesantes y útiles.