Garantiza que en móvil se pueda hacer pellizco/zoom: crítico para baja visión y legibilidad general.
Qué es
La metaetiqueta viewport controla el diseño móvil. Valores malos (p. ej. desactivar el zoom) impiden ampliar y suelen incumplir expectativas de accesibilidad.
Por qué importa
- Baja visión: Hasta ~500 % de zoom es una necesidad habitual
- Todas las personas: Texto más nítido en pantallas pequeñas
- WCAG: Se alinea con 1.4.4 (redimensionar) y 1.4.10 (reflujo) junto con CSS responsive
- Responsive: device-width encaja con diseños fluidos
Notas WCAG
- 1.4.4 Redimensionar texto: las personas usuarias deben poder escalar ~200 %
- 1.4.10 Reflujo: ~400 % de ancho: el contenido debería reflujar sin desplazamiento bidimensional (depende del diseño)
Propiedades que el plugin puede corregir
- width=device-width: igualar el ancho del dispositivo (recomendado)
- user-scalable=yes: permitir zoom
- initial-scale=1: línea base 100 %
- maximum-scale: si existe, no debería limitar por debajo de 5.0; quitarla suele ser lo mejor
Ajustes
Activar corrección del viewport:
- Interruptor global
- Busca la etiqueta viewport en la salida y la normaliza
Control de propiedades:
- Garantizar width=device-width
- Garantizar user-scalable=yes (quitar o sobrescribir user-scalable=no)
- Garantizar initial-scale=1
Zoom máximo:
- Ajustar o eliminar maximum-scale
- Quitar el límite permite zoom ilimitado (suele ser la mejor postura WCAG)
- Si mantienes tope, usa al menos 5.0
Reserva JavaScript (experimental):
- Si el tema omite el viewport o lo imprime en un sitio raro, JS puede inyectar uno: menos fiable que el servidor
Comprobación integrada del viewport
La comprobación adaptable del viewport carga la página de inicio pública y evalúa la configuración detectada mediante cinco comprobaciones claras:
- Ancho del dispositivo (
width=device-width) - Escala inicial
- Si se permite ampliar la página
- Zoom máximo
- Número de etiquetas viewport
Un resumen clasifica el resultado como correcto, mejorable o problemático. Cuando es posible, los valores recomendados se pueden seleccionar directamente en los ajustes. Guarda después los ajustes para aplicarlos al sitio web.
Abre Mostrar detalles técnicos cuando necesites consultar la URL comprobada y las etiquetas viewport completas que se encontraron. La comprobación utiliza un estado de carga que coincide con la estructura final y diferencia los errores de conexión o análisis de los problemas de configuración. El diseño se adapta a móviles, tabletas y ordenadores.
Abre Ayuda para consultar una guía compacta sobre la configuración segura del viewport. En móviles aparece como una hoja inferior que se puede cerrar deslizando hacia abajo; en pantallas más grandes se muestra como un diálogo. Explica los valores recomendados, el funcionamiento de la comprobación, cuándo utilizar la alternativa de JavaScript, los pasos de caché necesarios y los criterios WCAG 1.4.4 y 1.4.10.
Ejemplos
Ejemplo 1: Buen valor por defecto
Activa width, user-scalable e initial-scale; elimina por completo maximum-scale para zoom sin restricciones.
Ejemplo 2: Si debes limitar el zoom
Pon maximum-scale al menos en 5.0. Sin límite sigue siendo preferible.
Ejemplo 3: El tema no tiene etiqueta
Prueba el fallback JS solo tras confirmar que el tema no puede añadir viewport en PHP; vuelve a probar en dispositivos reales.
Consejos
- Usa la comprobación integrada tras cambios de tema
- Prefiere eliminar maximum-scale
- Evita user-scalable=no
- Tras cambios, vacía cachés de WordPress/servidor/CDN/navegador: el viewport suele cachearse mucho
- Prueba el zoom en navegadores iOS y Android
- Trata el fallback JS como último recurso
Problemas frecuentes
No se encuentra la etiqueta viewport
Confirma que el tema imprime <meta name="viewport">. Si no, añádela en el tema o activa el fallback.
Los cambios no se ven
Vacía cachés; un <head> HTML obsoleto es causa frecuente.
Notas técnicas
- Un filtro en el servidor ajusta la primera meta viewport en
<head> - Si hay varias etiquetas, solo se normaliza la primera
- La inyección JS es «lo mejor posible»
- 1.4.4 / 1.4.10 también dependen del CSS (reflujo, puntos de quiebre): no solo del viewport
Disponible para: Todos los planes Free