En esta secci√≥n practica conoceremos el punto de vista desde el cual se carga una p√°gina Web, ya que no es lo mismo una p√°gina cargada desde un ordenador de sobremesa con una pantalla de alta resoluci√≥n y pixeles que una p√°gina cargada desde un dispositivo movil con una pantalla peque√Īa y menor resoluci√≥n.

El punto de vista.

Con la actual tecnolog√≠a web en la que existen una gran cantidad de dispositivos que pueden acceder a internet, es necesario adaptar dicha tecnolog√≠a a la forma de uso de dicha tecnolog√≠a. Se sabe de sobra que la tecnolog√≠a mov√≠l ha avanzado a pasos agigantados en este sentido, con lo cual sus pantallas peque√Īas han sido modificadas para reproducir fielmente nuestras Web.

Pero que reproduzcan fielmente el c√≥digo HTML no implica que reproduzcan visiblemente una Web hecha para una pantalla de alta resoluci√≥n como puede ser de una pantalla de ordenador de 1366 * 768px. Por eso, adaptar la Web para que todos los dispositivos la vean igual es un reto que el dise√Īador debe de afrontar con conocimientos y cabeza.

Hasta ahora los dise√Īadores estabamos acostumbrados a realizar el esfuerzo para que la Web se viera siempre de la misma forma en cualquier pantalla, y tan dificil o m√°s que lo anterior, en cualquier navegador. Por parte de los navegadores Web, los est√°ndares web por parte del W3C no han sido garantia de uniformidad ya que cada navegador los interpreta a su modo.

Esto ha llevado a los dise√Īadores a crear m√ļltiples pruebas y adaptar las p√°ginas Web a cada navegador con el trabajo extra que conlleva. Y fruto de dicho esfuerzo se traduce en una serie de hacks o trucos con los que se puede evitar interpretaciones particulares.

En la actualidad este concepto de interpretación por navegador no solo implica un problema, sino que unido al hecho de los dispositivos multipantalla, acarrea un mayor problema con webs dedicadas a mantener el mismo estilo por pantalla.

Por eso mismo, con independencia de un navegador u otro, el dise√Īo Web en la actualidad tiende a la adecuaci√≥n entre contenidos y dispositivos. Este es el fundamento del dise√Īo Web adaptativo o Web Responsive.

Meta ViewPort

Si llamamos a una Web que no est√° dise√Īada de manera responsive desde un mov√≠l, ¬Ņpodremos ver correctamente el dise√Īo de la p√°gina Web cuando esta ha sido redactada para una pantalla de ordenador?

Con frecuencia los navegadores m√≥viles se enfrentan a dicha situaci√≥n teniendo que mostrar en una pantalla de bajas dimensiones un contenido no realizado para su visualizaci√≥n. La consecuencia es que suelen aparecer todos los elementos de la Web, pero a peque√Īo tama√Īo, es decir de manera reducida.

Con el viewport tomamos el control de ésta situación

El viewport es una etiqueta META que hace referencia al √°rea visible de la pantalla, el √°rea en que se muestra el contenido Web. Normalmente las dimensiones del viewport son m√°s peque√Īas que las dimensiones reales de la pantalla del dispositivo (por el marco del navegador que ocupa espacio propio).

dimensiones del navegador

El viewport permite configurar como va a interpretar el navegador las dimensiones de la p√°gina correspondiente. Actua sobre las dimensiones del navegador y la posibilidad de escalar el contenido.

Sintaxis y propiedades.

El viewport se declara en la cabecera del documento:

declaración de viewport

Las propiedades fundamentales que podemos declarar en content son:

  • WIDTH:
  • Define el ancho que tomar√° el ancho del dispositivo. Puede tomar un valor num√©rico en p√≠xeles, o usar la constante device-width para tomar la anchura del propio dispositivo.

  • HEIGHT:
  • Igual que la anterior pero para la altura.

  • INITIAL-SCALE:
  • Define la escala inicial a la que se mostrar√° la p√°gina. Su valor puede ser un n√ļmero real desde 0,1 en adelante. Una Web de 1 indica que no sufrir√° ning√ļn escalado y se mostrar√° al 100% de su tama√Īo.

  • MINIUM-SCALE y MAXIMUN-SCALE:
  • Definen los valores m√≠nimos y m√°ximos de escala que permitimos. El valor ser√° real desde 0,1 en adelante.

  • USER-SCALABLE:
  • Define los permisos de si se puede o no hacer zoom para escalar el contenido. Es una propiedad boleana por lo que solo permite dos valores como YES o NO.

La declaración viewport es necesaria si queremos tener control sobre el modo en que se verá la Web. Así por ejemplo, una posible declaración podría ser así:

declaración de viewport

En siguiente prácticas veremos como utilizar el viewport junto a otros elementos para producir una página totalmente adaptable. Ahora si quieres visita el enlace del vídeo o pasa al siguiente capítulo.