Cuando no puedes ampliar una pagina en el movil pellizcando con los dedos. solución DIVI.

Causas principales:

1. Viewport meta tag con "user-scalable=no":

   • Muchos constructores (incluido Divi) añaden esta etiqueta por defecto para evitar zoom en móviles y mejorar la experiencia "responsive".

   • Ejemplo:

     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

     (Esto bloquea explícitamente el zoom).

1. CSS con "overflow-x: hidden" o "touch-action: none":

   • Algunos temas o módulos de Divi aplican estilos que restringen gestos táctiles para evitar scroll horizontal no deseado.

2. Configuración de diseño responsive en Divi:

   • Divi prioriza que el diseño se vea exactamente como lo planeaste en móvil, lo que a veces sacrifica la accesibilidad (como el zoom).

Cómo solucionarlo:

Opción 1: Modificar el viewport meta tag (recomendado)

1. Ve a Divi → Opciones del Tema → Integraciones.

2. En "Código en el < head >", pega esto (elimina user-scalable=no y ajusta escalas):

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

   (Permite zoom hasta 5x y evita bloqueos).

Opción 2: Añadir CSS personalizado

1. Ve a Divi → Personalizador → CSS adicional.

2. Agrega este código para habilitar gestos táctiles:

   html, body {

   touch-action: manipulation !important;

   overflow-x: visible !important;

   }

Opción 3: Usar un plugin (si no quieres tocar código)

• Instala plugins como "WP Touch Mobile Plugin" o "Enable Zoom" que fuerzan la habilitación del zoom en móviles.

 Consideraciones importantes:

• Diseño roto: Permitir zoom puede afectar cómo se ve tu web en móvil (elementos desbordados, menús cortados). Prueba en distintos dispositivos.

• Rendimiento: Algunos navegadores (como Chrome en Android) ignoran user-scalable=no por accesibilidad, pero Safari (iOS) suele respetarlo.

• Accesibilidad: Bloquear el zoom perjudica a usuarios con problemas de visión. Si tu público es mayor o necesita accesibilidad, deja el zoom activo.

¿Por qué Divi lo hace por defecto?

Los constructores como Divi priorizan el control del diseño sobre la funcionalidad nativa del navegador. Su objetivo es que la página se vea "perfecta" en móvil, pero esto puede chocar con la usabilidad.

Ejemplo de cómo debería verse el viewport ideal para zoom:

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