Validación HTML: Considera evitar valores de viewport que impidan a los usuarios redimensionar documentos.

Acerca de este problema HTML

Cuando estableces user-scalable=no en tu etiqueta meta viewport, el navegador deshabilita completamente el pellizco para hacer zoom y otros gestos de escalado en dispositivos móviles. De manera similar, establecer maximum-scale=1 (o cualquier valor bajo) limita hasta dónde puede hacer zoom un usuario, efectivamente bloqueándolo de ampliar el contenido. Aunque los desarrolladores a veces usan estos valores para crear una experiencia “similar a una aplicación” o prevenir problemas de diseño durante el zoom, violan directamente las mejores prácticas de accesibilidad.

Por qué esto es un problema

Accesibilidad

Las Pautas de Accesibilidad al Contenido Web (WCAG) Criterio de Éxito 1.4.4 (Redimensionar texto) requiere que el texto pueda redimensionarse hasta un 200% sin pérdida de contenido o funcionalidad. Prevenir el zoom hace imposible que usuarios con baja visión, discapacidades cognitivas o deficiencias motoras interactúen cómodamente con tu página. Muchos usuarios dependen del pellizco para hacer zoom como su forma principal de leer contenido en dispositivos móviles.

Conformidad con estándares

El Validador HTML del W3C marca esto como una advertencia porque entra en conflicto con los estándares de accesibilidad establecidos. Aunque no hará que tu página falle la validación completamente, señala una práctica que perjudica la usabilidad. Los navegadores y sistemas operativos modernos también han comenzado a anular configuraciones restrictivas de viewport en algunos casos — por ejemplo, iOS Safari ignora user-scalable=no por defecto — lo que significa que la restricción puede no funcionar como se pretende mientras sigue activando advertencias.

Experiencia de usuario

Incluso para usuarios sin discapacidades, prevenir el zoom puede ser frustrante. Texto pequeño, diseños densos o contenido que no se ajusta completamente al tamaño de pantalla pueden beneficiarse de que el usuario pueda hacer zoom. Restringir esta capacidad elimina una característica fundamental del navegador que los usuarios esperan.

Cómo solucionarlo

Elimina user-scalable=no de tu etiqueta meta viewport. Si está presente, bórralo o establécelo como yes.
Elimina o incrementa maximum-scale. Si necesitas establecerlo, usa un valor de 5 o mayor. Idealmente, elimínalo completamente y deja que el navegador maneje los límites de zoom.
Elimina minimum-scale si está establecido en 1, ya que esto también puede restringir el comportamiento de zoom en algunos navegadores cuando se combina con otros valores.
Prueba tu diseño en varios niveles de zoom para asegurar que el contenido se reorganice correctamente y permanezca usable.

Ejemplos

❌ Viewport que previene el zoom

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

Esto deshabilita completamente el zoom del usuario en navegadores compatibles.

❌ Viewport con maximum-scale restrictivo

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

Esto limita el zoom al 100%, previniendo efectivamente cualquier zoom significativo.

❌ Ambas restricciones combinadas

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

Esta es la combinación más restrictiva y se ve comúnmente en frameworks y plantillas mobile-first.

✅ Viewport accesible (recomendado)

<meta name="viewport" content="width=device-width, initial-scale=1">

Esto establece un viewport responsivo sin restringir el zoom en absoluto. Se preserva el comportamiento de zoom por defecto del navegador, y los usuarios pueden escalar libremente.

✅ Viewport accesible con maximum-scale generoso

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5">

Si tienes una razón específica para establecer maximum-scale, usa un valor de 5 o mayor. Esto aún permite un zoom sustancial mientras te da cierto control sobre niveles extremos de zoom.

✅ Ejemplo de documento completo

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Accessible Page</title>
</head>
<body>
  <h1>Welcome</h1>
  <p>This page allows users to zoom freely.</p>
</body>
</html>

Si tu diseño se rompe cuando los usuarios hacen zoom, la solución es arreglar el CSS — usando unidades relativas como em, rem, o porcentajes, y técnicas de diseño responsivo — en lugar de deshabilitar el zoom. Un diseño responsivo bien construido debe manejar el zoom elegantemente sin necesidad de restringirlo.

Encuentra problemas como este automáticamente

Rocket Validator escanea miles de páginas en segundos, detectando problemas de HTML en todo tu sitio web.

Iniciar prueba gratuita Ver precios

Más información:

MDN Reference

MDN: Using the viewport meta tag to control layout on mobile browsers

→

Ayúdanos a mejorar nuestras guías

¿Te ha sido útil esta guía?