Dic 092014
 
Artículo HTML

La llegada de los teléfonos inteligentes que permiten navegar por internet ha supuesto un cambio en el modo de diseñar los sitios web. La mayoría de los nuevos diseños son “adaptables” (responsive), es decir, que cambian en función de las dimensiones del dispositivo en el que se visualizan.

Pero para muchos sitios web previamente existentes, el paso a un diseño “adaptable” no es trivial. De todos modos, hay algunas modificaciones que se pueden realizar sobre un diseño no-adaptable, que pueden mejorar su presentación en pantallas con resoluciones más pequeñas que aquellas para las que inicialmente habían sido diseñados.

Este artículo presenta una posible manera de realizar estos cambios en un sitio web no adaptable.

El meta tag viewport

Es muy posible que el responsable del mantenimiento de un sitio web, al encontrarse con el problema, haya encontrado un buen número de referencias en las que se indica que en la cabecera HTML debe incorporarse un meta tag “viewport” de la forma:

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

En realidad, esto sólo es cierto para sitios web que están preparados para adaptarse a las dimensiones de la pantalla en la que se visualizan.

Vamos a tomar como ejemplo el sitio web de openalfa que contiene el callejero de california.

Si no hemos añadido todavía el meta tag viewport, al acceder al sitio desde un dispositivo móvil veremos que se visualiza de la siguiente forma:

california-st-sin-viewport

Como vemos, el navegador Firefox que estamos utilizando ha escalado la página para ajustarla al ancho de la pantalla. Esto resulta en unos textos demasiado pequeños, de manera que el usuario se ve obligado a ampliar para poder leer el contenido.

Ahora, si añadimos el meta tag viewport tal y como se ve más arriba, y volvemos a cargar la página, obtenemos lo siguiente:

california-st-viewport-1

En este caso, el navegador no ha escalado la página (porque se ha especificado “initial-scale=1.0”). Por lo tanto, sólo están visibles los primeros 360 pixels en horizontal, que es la resolución del dispositivo que estamos utilizando.

Nuestro objetivo es presentar, en dispositivos de baja resolución, el contenido principal del sitio, prescindiendo de la barra lateral. Quitando la barra lateral, el contenido principal de la página es de 740 pixels. Por lo tanto, añadimos al header un meta tag viewport que especifica un ancho fijo de 740 pixels, de la forma:

<meta name="viewport" content="width=740">

Y al volver a cargar la página en el dispositivo móvil, obtenemos:

california-st-viewport-2

Como vemos, al no especificar una escala inicial, el comportamiento por defecto del navegador del dispositivo es escalar el contenido correspondiente a la anchura del viewport especificado, para que ocupe la totalidad de la pantalla.

Esto ya está un poco mejor, aunque el tamaño de muchos de los textos es todavía demasiado pequeño. Por otra parte, el usuario todavía puede acceder al menú lateral haciendo un scroll horizontal de la página.

Configurar dinámicamente el viewport

En el apartado anterior hemos mencionado el comportamiento que tiene el navegador cuando no se especifica un v alor de “initial-scale”: el navegador Firefox que utilizamos en nuestro dispositivo Android escala el contenido del viewport para que ocupe toda la pantalla.

Sin embargo, si realizamos la misma prueba en el mismo dispositivo, pero con un navegador Chrome, vemos que su comportamiento es distinto: Chrome escala la página completa a las dimensiones de la pantalla, sin tener en cuenta el viewport.

Para evitar este problema, debemos especificar un valor de initial-scale. Pero debe ser un valor calculado, ya que depende de la resolución horizontal de la pantalla en la que se carga la página.

Afortunadamente, es posible generar dinámicamente el tag viewport utilizando javascript. En javascript, la resolución horizontal de la pantalla se encuentra en la variable “screen.width”. Con esto, sustituimos el tag viewport estático por:

<!--<meta name="viewport" content="width=740">-->
<script>
var head = document.head || document.getElementsByTagName('head')[0];
function setViewPort() {
  var ww = screen.width;
  var scale = Math.round(ww*100 / 750.0) / 100.0;
  if (scale > 1) scale = 1.0;
  var meta = document.createElement('meta');
  meta.name = "viewport";
  meta.content = "width=740, initial-scale=" + scale;
  head.appendChild(meta);
}
setViewport();
</script>

y comprobamos que el comportamiento que se obtiene es el deseado, tanto en Chrome como en Firefox.

Configurar el viewport al cambiar de orientación

También podemos querer configurar dinámicamente el viewport cuando el usuario cambia la orientación del móvil de vertical (portrait) a horizontal (landscape).

Habiendo definido la función javascript “setViewport()” como se explica en el apartado anterior, debería ser sencillo reaccionar a un cambio de orientación del dispositivo. Bastaría con añadir un manejador del evento “orientationchange”, que simplemente ejecuta la función setViewport():

window.addEventListener("orientationchange", function() {
  setViewPort();
}, false);

Pero la versión actual del navegador Firefox no soporta el evento “orientationchange”! en su lugar, es posible utilizar la técnica que se explica en este artículo.

Con ello, el código definitivo para reaccionar a un cambio de orientación queda como sigue:

if (typeof window.orientation === 'undefined') {
  // Para Firefox
    var detectarOrientacion = window.matchMedia("(orientation: portrait)");
    detectarOrientacion.addListener(function(m) {
        setTimeout( setViewport, 200);
    });
} else { 
  // Para Chrome y otros navegadores
    window.addEventListener("orientationchange", function() {
        setTimeout( setViewport, 200);
    }, false);
}

 

Referencias

 Publicado por en 6:12 pm

 Deja un comentario

(requerido)

(requerido)