Logotipo de Xitrus.
sígueme en facebook

Sígueme

R L E F G I

Buscar

Cargando

Lo último del blog

Twitter

Hosting

Xitrus está alojado en:

Xitrus está alojado en Cyberneticos.
06
9

Meta-tag Viewport

La meta-etiqueta Viewport fue creada por Apple para el iPhone, pero rápidamente se a convertido en un estándar soportado por la mayoría de los dispositivos móviles (smartphones, tablets y parte de los móviles de gama media y baja).
Esta etiqueta nos permite elegir como se mostrará nuestra página en los navegadores de estos dispositivos, pudiendo especifica el ancho que tendrá la página dentro del navegador, el nivel de zoom que podemos hacer... lo que nos puede ayudar a crear diseños adecuados para móviles y perfeccionar nuestro responsive design (ya que sin esta etiqueta es el navegador el que elige como mostrarlo, y puede que no sea la mejor forma).

El ejemplo de la necesidad de usar viewport en http://xitrus.es

Añadir Viewport

Su uso es totalmente necesario cuando tenemos un diseño responsivo, ya que sino puede que el navegador de nuestro dispositivo lo muestre como en un navegador de PC, y entonces no serviría de nada haber hecho la adaptación (más abajo especificare que parámetros debemos de poner en el Viewport para diseños responsivos). Para implementarlo debemos de añadir la siguiente etiqueta meta en el <head>:

  1. <meta name="viewport" content="width=320">

Configurar Viewport

A esta etiqueta podemos añadirle varios parámetros para que nuestra página se comporte como queramos:

  • Width: ancho de la página (se puede especificar que sea el mismo ancho que el del dispositivo, y más abajo explicaré como).
  • Height: alto de la página, actúa igual que el width.
  • Initial-scale: escala o zoom inicial de la página.
  • Minimum-scale: zoom mínimo que podemos hacer en la página.
  • Maximum-scale: zoom máximo que podemos hacer en la página.
  • User-scalable: establece si está permitido o no hacer zoom.

Ajustar la página a la pantalla

Si queremos que nuestra página tenga el mismo ancho que el de la pantalla de nuestro dispositivo debemos establecer su width como "device-width" y automáticamente se ajustará.

  1. <meta name="viewport" content="width=device-width">

Crear un Viewport para Responsive Design

Cuando tenemos un diseño responsivo tenemos que especificar que el ancho de la página sea el mismo que el del dispositivo, y además debemos de establecer que el zoom mínimo sea 1.0, que seria la página sin hacer zoom, y opcionalmente podemos establecer si pueden ampliar la página o no los usuarios con el User-scalable configurándolo con "no".

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

Comentarios

Sígueme

R L E F G I

Buscar

Cargando

Lo último del blog

Twitter

Hosting

Xitrus está alojado en:

Xitrus está alojado en Cyberneticos.
Cerrar sesión
Usuario: Contraseña: