Usa el Viewport correcto para layouts en

responsive
Configurar correctamente el viewport para layouts en responsive[1] es clave para
que nuestros diseos se visualicen sin problemas en todos los dispositivos
mviles, sin embargo no todo el mundo lo define correctamente.
Muchos desarrolladores definen el meta viewport de la siguiente forma:
Cdigo :
<m
et
a"
vie
wpo
rt"
con
t
e
n
t
"
w
i
d
t
h
=
d
e
v
i
c
e
w
i
dt
h,i
ni
ti
a
lsc
al
e
=1
,ma
x
im
um
-s
c
al
e=
1"

O de esta otra:
Cdigo :
<m
et
a"
vie
wpo
rt"
con
t
e
n
t
"
w
i
d
t
h
=
d
e
v
i
c
e
w
i
dt
h,i
ni
ti
a
lsc
al
e
=1
,us
e
rsc
al
a
bl
e=
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 tamaos adecuados
puede haber algunos que no se puedan ver correctamente.
Por ejemplo: los textos en imgenes podran verse demasiado pequeos en un mvil.
En este caso el usuario tender a hacer zoom para leerlo, pero no podr. Esto supone
una frustracin 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 cdigo es
eliminar maximum-scale y user-scalable.
Cdigo :

<m
et
a"
vie
wpo
rt"
con
t
e
n
t
"
w
i
d
t
h
=
d
e
v
i
c
e
w
i
dt
h,i
ni
ti
a
lsc
al
e
=1
"

Por defecto, user-scalable tiene el valor de yes, es decir, el zoom est activado. Si no
definen maximum-scale, el zoom mximo ser el determinado por el navegador, por
lo que tampoco necesitamos indicarlo.
Espero que tengan en cuenta este pequeo tip de ahora en adelante. Por muy
insignificante que pueda parecer, los detalles hacen la diferencia y hacen felices a los
usuarios.
Cristalab y Mejorando.la te traen el Curso Profesional de Node.js y Javascript[2]. Online,
avanzado, con diploma de certificacin y clases en vivo.
1. http://www.cristalab.com/tags/responsive/
2. http://goo.gl/eJTa3Q