Cómo hacer que tu web sea responsive con la meta tag Viewport
¿Qué significa la etiqueta meta Viewport?
La ventana de visualización, o viewport en inglés, es la zona visible de la página disponible para el usuario sin necesidad de desplazarse por la pantalla. El tamaño de la ventana de visualización variará según el tipo de dispositivo, desde relojes inteligentes hasta ordenadores. La etiqueta meta Viewport permite que el sitio web se adapte correctamente al mostrarse en diferentes dispositivos. Indica a los navegadores cómo mostrar el sitio en móviles, tabletas y otras pantallas de dispositivos.
De hecho, por defecto, los navegadores móviles muestran la página del sitio de la misma manera que en un PC. Esto se debe a que la resolución del dispositivo es mayor que el ancho del dispositivo. Es decir, si ves la página desde un dispositivo móvil, será incómodo. Esto perjudica la apariencia del sitio y hace que no sea adecuado para el uso en dispositivos móviles.
↑ Tornar a dalt¿Dónde agregar la etiqueta meta Viewport en Drupal?
Debes agregar las etiquetas meta en la cabecera (<head>) de cada página que necesite escalarse a la resolución de la pantalla. A continuación, te explicamos paso a paso cómo hacerlo correctamente. ¡Así que manos a la obra!
Abre tu sistema de archivos con tu editor de código preferido, situándote en la raíz de tu Drupal (generalmente la carpeta /web) y desde allí, ve a /themes/my_theme/templates. Luego, verifica si tu theme tiene un archivo llamado html.tpl.php. En este punto, hay dos opciones posibles:
- Si has encontrado este archivo en tu theme, estás de enhorabuena. Más adelante te explicaremos cómo modificarlo.
- Si este archivo no se encuentra en tu theme, puedes copiarlo desde esta carpeta: web/core/modules/system/templates y pegarlo en la carpeta templates de tu theme.
Ahora solo debes abrir tu archivo html.html.twig y agregar la siguiente línea de código, entre las etiquetas <head> y </head>:
<meta name="viewport" content="initial-scale=1.0, width=device-width" />El resultado debería ser muy similar a esto (ver la línea número 6):
<!DOCTYPE html>
<html{{ html_attributes }}>
<head>
<head-placeholder token="{{ placeholder_token }}">
<title>{{ head_title|safe_join(' | ') }}</title>
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<css-placeholder token="{{ placeholder_token }}">
<js-placeholder token="{{ placeholder_token }}">
</head>
<body{{ attributes }}>
{#
Navegación por teclado/accesibilidad, enlace a la sección principal del contenido en
page.html.twig.
#}
<a href="#main-content" class="visually-hidden focusable">
{{ 'Skip to main content'|t }}
</a>
{{ page_top }}
{{ page }}
{{ page_bottom }}
<js-bottom-placeholder token="{{ placeholder_token }}">
</body>
</html>El siguiente paso es limpiar la caché en el sitio de Drupal. Para hacerlo, ve al menú de administración, luego a Configuración, después a Rendimiento, y haz clic en el botón Limpiar todas las cachés. Si tienes Drush, puedes ejecutar drush cr desde tu terminal.
Y eso sería todo. O casi. El último paso crucial es probar tu sitio. La manera más sencilla de hacerlo es con el navegador Chrome. Abre tu sitio web en Chrome, haz clic con el botón derecho y selecciona Inspeccionar. Te aparecerá una ventana nueva en la parte inferior del navegador. Haz clic en el ícono del teléfono móvil para ver si tu sitio es responsivo y se muestra correctamente.
↑ Tornar a daltLos atributos básicos de la etiqueta meta viewport
- Width: establece el ancho de la zona visible para que sea igual al ancho CSS del dispositivo. Puedes especificar el ancho del dispositivo para ajustar el ancho de la página al tamaño de un teléfono inteligente u otro dispositivo.
- Initial-scale: un atributo que establece la escala inicial de la página.
- Height: establece la altura de la zona a mostrar para la visualización. Para establecer este parámetro a la altura del dispositivo, utiliza el valor de la altura del dispositivo.
Además, dentro del código, puedes especificar parámetros adicionales utilizando la etiqueta del viewport. Si es necesario, se pueden especificar más detalles para evitar que el usuario utilice el escalado y establecer opciones cuando la plantilla se adapta automáticamente a la orientación de la ventana.
- user-scalable: habilita o deshabilita el escalado personalizado de la página, configurándose en Yes o No.
- minimum-scale: escala mínima (de 0.1 a 10).
- maximum-scale: valor máximo de la escala (de 0.1 a 10).
¿Cómo funcionan los diseños responsivos con el ancho del dispositivo?
El atributo width=device-width es una indicación para los navegadores. Esto muestra exactamente cómo el navegador ha gestionado el tamaño de la ventana de visualización. Y la probabilidad de que vuelvan a aparecer las barras de desplazamiento horizontales en la página es nula. Esta etiqueta meta del viewport ayuda al navegador móvil a entender el ancho de la ventana de visualización del dispositivo, independientemente de su orientación.
Una vez que el navegador, y especialmente el móvil, ha sido notificado de qué ancho de dispositivo utilizar, podemos realizar mediaqueries. Estas mediaqueries son necesarias para cambiar los diseños y apilar columnas de tal manera que sea cómodo para todos los usuarios móviles ver todo el contenido sin barras de desplazamiento. Después de completar todos los pasos, ver tu sitio desde varios dispositivos móviles será una experiencia muy positiva para tus visitantes.
↑ Tornar a daltConclusiones
La etiqueta meta del viewport se utiliza para optimizar los sitios web para dispositivos móviles. Permite adaptar el tamaño de la zona visible de la página a la pantalla del dispositivo del visitante.
El valor más óptimo es escalar automáticamente el ancho de la página para ajustarse automáticamente a la pantalla. Puedes establecer el factor de escala de la altura de la página, habilitar o deshabilitar el zoom manual de la pantalla, y así sucesivamente, pero eso ya lleva más tiempo. Los sitios web que no están adaptados a los dispositivos con pantallas diferentes pierden la mayor parte del tráfico.
Haz que tu sitio sea responsivo, así tu contenido será fácil de ver en cualquier dispositivo. Dado que la mayoría de los navegadores ahora admiten la etiqueta meta del viewport, no deberías tener ningún problema con esto.
↑ Tornar a daltSobre el autor
Apasionada del desarrollo front-end y del diseño gráfico, además de ser consultora de accesibilidad web. En mi doble vertiente de desarrolladora y diseñadora, me gusta incorporar las últimas tendencias de diseño web en todos nuestros proyectos.
Deja tu comentario