Saltar al contenido principal

Viewport

El viewport permite configurar los navegadores correctamaente para el empleo de media queries.

En la cabecera del documento HTML, se debe añadir la siguiente línea:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Responsive design</title>
  </head>
  <body>
    <h1>Responsive design</h1>
  </body>
</html>

Esta etiqeuta existe porque, cuando se lanzó el iPhone original y las personas comenzaron a ver sitios web en una pequeña pantalla de teléfono, la mayoría de los sitios no estaban optimizados para dispositivos móviles. Por lo tanto, el navegador móvil establecería el ancho de la ventana gráfica en 980 píxeles. Al tener esta configuración, la página se rendezaría con ese ancho y mostraría el resultado como una versión alejada del diseño del escritorio.

Otros navegadores móviles hicieron lo mismo. Los usuarios podían acercar y desplazarse por el sitio web para ver las partes que les interesaban, pero se veía mal. Esto se puede todavía ver si tenemos la desgracia de encontrarnos con un sitio que no tiene un diseño adaptativo.