Meta Tag Viewport

Esta etiqueta inicialmente fue creada por Apple para identificar como se visualizaría una página web en el iphone pero hoy día se ha convertido en un estándar del desarrollo web móvil y para el diseño web responsive



Si creamos un html sencillo para visualizarlo en el móvil donde añadimos una imagen de 300x300

Y esperamos que el resultado sea este, en una pantalla de 320px de ancho.

Nos sorprenderemos al ver que el resultado es este

Esto se produce porque los navegadores de smarthphones muestran a un ancho por defecto predeterminado de la ventana del navegador , por ejemplo el iphone a 980px y en android a 800px sin importar los pixeles reales. Si queremos crear una web que se adapte al tamaño natural del dispositivo tenemos que utilizar el meta tag viewport.

La instrucción mas común que añadiremos en el head de la pagina será

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

Donde le indicamos que el ancho donde se va a representar la web sea el del dispositivo, y que no haya zoom inicial, esto es porque algunos navegadores como opera mini hacen un zoom inicial si no se especifica lo contrario, ni tampoco zoom máximo.

También se puede indicar el atributo user-scalable para indicar si el usuario puede hacer zoom o no.

De esta forma ya se renderiza la página como esperamos.

Aunque el ancho físico de este móvil son 480 px, la imagen de 300 pixels se ve caso al completo, esto es porque los smartphone en la actualidad fijan width:device-width en 320 pixels aunque los reales sean 480px o 640px. 

Libros Relacionados

---