Usa el Viewport correcto para layouts en responsive

Configurar correctamente el viewport para layouts en responsive es clave para que nuestros diseños se visualicen sin problemas en todos los dispositivos móviles, sin embargo no todo el mundo lo define correctamente.

Muchos desarrolladores definen el meta viewport de la siguiente forma:

Código :

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

O de esta otra:

Código :

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

Aunque el responsive funciona, las propiedades user-scalable=no y maximum-scale=1 no le permiten hacer zoom al usuario. Esto puede resultar un problema para algunas personas. Aunque los elementos de nuestra web tengan tamaños adecuados puede haber algunos que no se puedan ver correctamente.

Por ejemplo: los textos en imágenes podrían verse demasiado pequeños en un móvil. En este caso el usuario tenderá a hacer zoom para leerlo, pero no podrá. Esto supone una frustración para el usuario, algo que tenemos que evitar para ofrecer una buena experiencia de usuario.

El uso correcto del meta tag viewport

Lo único que tenemos que hacer al poner el meta viewport en nuestro código es eliminar maximum-scale y user-scalable.

Código :

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

Por defecto, user-scalable tiene el valor de yes, es decir, el zoom está activado. Si no definen maximum-scale, el zoom máximo será el determinado por el navegador, por lo que tampoco necesitamos indicarlo.

Espero que tengan en cuenta este pequeño tip de ahora en adelante. Por muy insignificante que pueda parecer, los detalles hacen la diferencia y hacen felices a los usuarios.

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.