Calificación:
  • 0 voto(s) - 0 Media
  • 1
  • 2
  • 3
  • 4
  • 5
Aporte Uso eficiente de la etiqueta meta viewport
#1
Meta viewport sirve para controlar la composición en los navegadores moviles,
un típico sitio optimizado para móvil contiene algo así:
<meta name="viewport" content="width=device-width, user-scalable=no">

La propiedad width controla el tamaño del viewport, puede definirse con un número en pixeles como  width=600 o con un valor especial device-width que es el equivalente al ancho de la pantalla en píxeles CSS pixels en una escala de 100%. (Existen valores correspondientes de height y device-height, los cuales pueden ser útiles para páginas con elementos que cambian tamaño o posición basadas en la altura del viewport (height).

La propiedad initial-scale controla el nivel de zoom cuando la página se carga por primera vez. Las propiedades maximum-scale, minimum-scale, y user-scalable controlan la forma en cómo se permite a los usuarios aumentar o disminiuir el zoom en la página.

Pero existe un gran problema el cual un pixel no es un pixel ya que el iPhone y muchos teléfonos Android populares tienen pantallas de 3 a 4 pulgadas (7–10 cm) con 320—480 píxeles (~160 dpi) y algunos navegadores moviles al cargar las paginas web no las muestarn tal cual, por que? porque aunque haya celulares con el mismo tamaño de pantalla la cantidad de pixeles cambia debido a esto se muestran muchas páginas alrededor de un tercio más pequeñas (en tamaño real, tamaño físico) que iPhone o Android. Esto causó problemas de usabilidad y lectura en muchos sitios web optimizados con funcionalidad touch.

Claramente existe demanda por la etiqueta "meta viewport", ya que es soportada por la mayoría de los buscadores móviles y usada por miles de sitios web. Sería bueno contar con un verdadero estándar para que las páginas web puedan controlar las propiedades del viewport.

Para mas informacion pueden visitar esta pagina que encontre esta en ingles pero se entiende:
http://www.w3.org/TR/css-device-adapt-1/

Pero para no complicarse les recomiendo usar estos meta name="viewport" que son los que usan la mayoria de paginas web responsive adaptables al explorador:

<meta name="viewport" content="width = device-width, initial-scale = 1.0">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
#2
amigos saben como configurar el open graph de facebook en wordpresss ?
#3
Es una etiqueta meta muy importante para que nuestras páginas web se vean de manera correcta (o lo más cercano a eso) en los diferentes tamaños de dispositivos móviles, gracias por compartir esta información, saludos.
WWW


Posibles temas similares...
Tema Autor Respuestas Vistas Último mensaje
  Botones HTML con la etiqueta BUTTON Junior 0 716 23-05-2013, 10:34 PM
Último mensaje: Junior
  Etiqueta de Audio y Videos HTML5 torgar22 0 382 01-03-2013, 07:00 PM
Último mensaje: torgar22



Usuarios navegando en este tema: 1 invitado(s)