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" />
