Viewport

Cuanto accedemos desde un smartphone o tablet a un sitio web, normalmente el navegador comprueba la resolución del terminal y escalan el contenido para adaptarlo a su pantalla.

Esta práctica ocasiona verdaderos quebraderos de cabeza en el diseño web para smartphones.

El viewport es un atributo del tag <meta> que  se incluye dentro del <head> de un documento HTML. Su aspecto es el siguiente:

<!DOCTYPE html>
<html lang="es">
<head>
<head>
      <title> Tamaño adaptado a un móvil </title>
      <meta name="viewport" content="width=device-width"/>
</head>
<body>
<h1>Contenidos del Documento </h1>
</body>
</html>

Los valores que puede tomar el viewport son los siguientes:

Valores del viewport

Atributo width: sirve para fijar el ancho. Por ejemplo si queremos fijar el ancho a 320px, escribiremos  <meta name=»viewport» content=»width=320″/>. Sin embargo, si escribimos device-width equivale a colocar 100%

Atributo height: el funcionamiento es igual que el anterior, pero para el alto.

Atributo scale: define la escala de la página. Podemos definir el valor inicial, mínimo y máximo, o incluso desactivar la escala de página.

A continuación podemos ver cómo cambia una imagen subida a una web, según los distintos valores que demos al viewport. En este caso se trata de una pantalla iPhone 4 con resolución de 640x960px

He colocado una imagen de 640px de ancho y este es el resultado:

  • En el primer ejemplo vemos cómo la imagen ocupa el 100% de la pantalla. No nos permite escalar.
  • En el segundo caso no he puesto etiqueta viewport, la imagen deja espacio sin rellenar. Permite la escala.
  • En el tercer caso podemos ver cómo la imagen se sale de pantalla . No nos deja escalar.

Ejemplos viewport

Como podeis ver, se trata de manipular el tamaño de la página para mostrarla más o menos grande en el navegador del smartphone. Si además queremos utilizar la pantalla al 100% y simular una App, podemos hacer lo siguiente:
Ocultar la barra de navegación en Mobile Safari, sin usar javascript.

<meta name="viewport" content="width=device-width; initial-scale=1.0;
maximum-scale=1.0; user-scalable=0;" /> <meta name="apple-mobile-web-app-capable" content="yes" />
<meta names="apple-mobile-web-app-status-bar-style" content="black-translucent" />

 

Share and Enjoy !

Shares