Mobile Detect
Módulo ligero de detección móvil basado en la biblioteca Mobile_Detect.php, que proporciona servicios, funciones Twig, contextos de caché y plugins de condición para detectar dispositivos móviles, tablets y plataformas.
mobile_detect
Instalar
composer require 'drupal/mobile_detect:^4.0'
composer require 'drupal/mobile_detect:^3.0'
Overview
Mobile Detect es un módulo ligero de detección móvil que integra la popular biblioteca Mobile_Detect.php en Drupal. Está diseñado para ayudar a los desarrolladores que utilizan técnicas de diseño mobile-first y responsive que necesitan realizar pequeños ajustes para usuarios de dispositivos móviles y tablets.
El módulo proporciona un conjunto completo de herramientas para la detección de dispositivos, incluyendo un servicio que puede usarse programáticamente, funciones Twig para usar en plantillas, contextos de caché para un almacenamiento en caché adecuado basado en el tipo de dispositivo, y plugins de condición que pueden usarse con bloques y otras configuraciones de visibilidad.
Las capacidades principales incluyen detectar si un visitante está usando un dispositivo móvil, tablet o escritorio, así como identificar la plataforma del sistema operativo (iOS, Android). El módulo añade automáticamente clases CSS al elemento HTML (is-mobile, is-tablet) para facilitar ajustes responsive basados en CSS.
Features
- Proporciona el servicio mobile_detect que envuelve la biblioteca Detection\MobileDetect para la detección programática de dispositivos
- Funciones Twig para detección de dispositivos basada en plantillas: is_mobile(), is_tablet(), is_device(), is_ios(), is_android_os()
- Tres contextos de caché (mobile_detect_device_type, mobile_detect_is_mobile, mobile_detect_platform) para una variación adecuada de caché basada en las características del dispositivo
- Plugin de condición de tipo de dispositivo para configuraciones de visibilidad que soporta detección de teléfono, tablet y escritorio
- Plugin de condición de plataforma de dispositivo para configuraciones de visibilidad que soporta detección de Android e iOS
- Bloque Mobile Detect Status para propósitos de desarrollo y depuración que muestra los resultados actuales de detección de dispositivos
- Clases CSS automáticas (is-mobile, is-tablet) añadidas al elemento HTML para diseño responsive basado en CSS
- Integración con el módulo Paragraphs a través de la adjunción de contexto de caché
Use Cases
Mostrar contenido diferente para usuarios móviles vs escritorio
Usa el plugin de condición de tipo de dispositivo en bloques para mostrar un menú de navegación simplificado para usuarios móviles mientras muestras un mega-menú completo para usuarios de escritorio. Configura la visibilidad del bloque para mostrar solo cuando el dispositivo es 'phone' o 'tablet'.
Mostrar insignias de tiendas de aplicaciones según la plataforma
Usa la condición de plataforma de dispositivo para mostrar una insignia de App Store para usuarios de iOS y una insignia de Google Play para usuarios de Android. Crea dos bloques con las configuraciones de condición apropiadas.
Carga de imágenes responsive en plantillas
Usa la función Twig is_mobile() en plantillas para cargar imágenes de menor resolución para usuarios móviles: {% if is_mobile() %}<img src="mobile-image.jpg">{% else %}<img src="desktop-image.jpg">{% endif %}
Detección programática de dispositivos en módulos personalizados
Inyecta u obtén el servicio mobile_detect en código personalizado: $detect = \Drupal::service('mobile_detect'); if ($detect->isMobile()) { // Lógica específica para móviles }
Ajustes responsive basados en CSS
Usa las clases CSS añadidas automáticamente (is-mobile, is-tablet) en el elemento HTML para estilos basados en CSS: html.is-mobile .sidebar { display: none; }
Selección de variantes de Panel/Layout
Al usar Panels para variantes de página, crea una variante para Tablet y una variante para Móvil usando la condición de tipo de dispositivo. Coloca la variante de Tablet antes de la de Móvil en la lista de variantes ya que Mobile_Detect considera las tablets como dispositivos móviles.
Tips
- Mobile_Detect considera los dispositivos tablet también como dispositivos móviles. Al usar reglas tanto para tablet como para móvil, siempre coloca las reglas de tablet primero para asegurar que las tablets se identifiquen correctamente.
- Usa el bloque Mobile Detect Status durante el desarrollo para verificar que la detección de dispositivos funciona correctamente.
- Para usuarios anónimos que requieren contenido específico por dispositivo, recuerda que Internal Page Cache debe estar deshabilitado, lo cual tiene implicaciones de rendimiento.
- Los contextos de caché aseguran que Drupal almacene en caché correctamente versiones separadas para diferentes tipos de dispositivos - siempre incluye el contexto de caché apropiado al usar detección de dispositivos en código personalizado.
Technical Details
Admin Pages 1
/admin/config/user-interface/mobile-detect
Configura los ajustes de Mobile Detect. Actualmente proporciona una opción experimental para añadir el contexto de caché mobile_detect_is_mobile a cada página automáticamente.
Permisos 1
Hooks 4
hook_preprocess_html
Añade las clases CSS 'is-mobile' e 'is-tablet' al elemento HTML basándose en la detección de dispositivos. También añade el contexto de caché mobile_detect_is_mobile.
hook_preprocess_paragraph
Añade el contexto de caché mobile_detect_is_mobile a todos los párrafos para una variación adecuada de caché.
hook_page_attachments_alter
Añade condicionalmente el contexto de caché mobile_detect_is_mobile a todas las páginas cuando está habilitado en la configuración.
hook_theme
Define el hook de tema mobile_detect_status_block para la plantilla del bloque de estado.
Troubleshooting 3
El módulo Internal Page Cache asume que todas las páginas servidas a usuarios anónimos son idénticas independientemente de los contextos de caché. Si necesitas variar el contenido para usuarios anónimos basándote en la detección de dispositivos, debes deshabilitar el módulo Internal Page Cache.
Los problemas con la lógica real de detección de dispositivos deben dirigirse a la cola de issues de GitHub de la biblioteca Mobile_Detect, no a la cola de issues del módulo Drupal.
Limpia todos los cachés después de cambiar la configuración del contexto de caché. Asegúrate de estar usando el contexto de caché correcto para tu caso de uso (mobile_detect_device_type, mobile_detect_is_mobile o mobile_detect_platform).
Security Notes 2
- El módulo tiene cobertura de seguridad del Drupal Security Team.
- La detección de dispositivos se basa en cadenas de user agent que pueden ser falsificadas por los clientes - no uses para decisiones críticas de seguridad.