Probador de Diseño Responsive: Previsualiza viewports móviles, de tableta y de escritorio

Introduce una URL, elige un viewport CSS predefinido o una anchura y altura personalizadas y revisa la página en un iframe. Esta herramienta comprueba el diseño en los tamaños elegidos; no emula un dispositivo físico.

Algunos sitios bloquean la carga en iframes mediante cabeceras de seguridad como X-Frame-Options o Content-Security-Policy. Una ventana del navegador estrecha también puede limitar el área visible de la vista previa.

Dispositivos Preestablecidos

Tamaño Personalizado

Tamaño Actual:

Lista de comprobación para pruebas responsive

Usa esta lista breve después de cada cambio de viewport. Ayuda a encontrar problemas de layout sin tratar un único tamaño de vista previa como prueba de que todos los dispositivos funcionan.

  1. Carga una página con contenido real y confirma que se ven el encabezado, el contenido principal y la acción principal.
  2. Prueba un móvil estrecho, un móvil más ancho, una tablet, un ancho de escritorio y un caso horizontal o de poca altura.
  3. Prueba justo por debajo y por encima de cada breakpoint CSS definido por el contenido y compara el cambio de layout.
  4. Comprueba si hay desplazamiento horizontal, texto cortado, navegación difícil de usar, problemas en formularios o medios que no escalan.
  5. Repite las comprobaciones táctiles, específicas del navegador, de zoom y de red limitada en un navegador real o laboratorio de dispositivos.
  6. Anota el viewport, el navegador y el resultado para poder reproducir una corrección posterior.

Para un flujo de depuración más completo, consulta la lista de depuración responsive y los conceptos básicos del viewport.

Consejos de Diseño Responsive

Qué puede mostrar y qué no puede mostrar este probador

Esta herramienta cambia la anchura y la altura CSS del iframe para que puedas revisar los cambios de diseño en los tamaños de viewport elegidos. No reproduce el DPR, el táctil, la interfaz del navegador, el agente de usuario ni las condiciones de red de un dispositivo físico. Confirma el comportamiento táctil y específico del dispositivo en hardware real o en un laboratorio de dispositivos.

Anchuras de viewport que puedes probar

  • Ejemplos de viewport CSS pequeño: 320px, 360px, 375px, 390px, 428px
  • Ejemplos de viewport CSS de tableta: 768px, 820px, 834px, 1024px
  • Ejemplos de viewport CSS de escritorio: 1280px, 1366px, 1440px
  • Ejemplos de viewport CSS ancho: 1536px o más

Consejos de Prueba

  • Prueba con contenido real en lugar de marcadores de posición para asegurar que los diseños manejen varias longitudes de contenido
  • Verifica que los menús de navegación sean utilizables en pantallas pequeñas
  • Asegúrate de que los elementos de formulario sean utilizables y fáciles de completar en todos los dispositivos
  • Confirma las interacciones táctiles en un dispositivo táctil real; esta vista previa no proporciona entrada táctil
  • Verifica que las imágenes y medios escalen correctamente
  • Usa las herramientas de desarrollo del navegador para limitar la red cuando necesites probar la carga; esta vista previa no emula las condiciones de red
  • Verifica la legibilidad de las fuentes asegurando que el tamaño del texto y la altura de línea permanezcan legibles en las pantallas móviles más pequeñas
  • Prueba justo por debajo y por encima de cada breakpoint definido por el contenido para confirmar el cambio de diseño esperado

Preguntas Frecuentes

¿Por qué algunos sitios web no se pueden cargar en el probador?

Muchos sitios web establecen encabezados X-Frame-Options o Content-Security-Policy por razones de seguridad, que impiden que se carguen en iframes. Esta es una medida de seguridad para prevenir clickjacking y otros ataques. Para estos sitios web, es posible que necesites usar herramientas de desarrollador del navegador u otros métodos de prueba.

¿Cómo difiere el sitio web en el probador de los dispositivos reales?

Este probador previsualiza principalmente tamaños de viewport CSS y no puede reproducir todas las características de los dispositivos reales, como las interacciones táctiles, el DPR o comportamientos específicos del navegador. Para la prueba final, verifica el diseño en dispositivos reales.

¿Cómo puedo probar breakpoints específicos de media query?

Usa la función de tamaño personalizado para ingresar tus valores de breakpoint de media query. Por ejemplo, si tienes un breakpoint en 768px de ancho, puedes ingresar 767px y 768px para probar diseños en ambos lados del breakpoint.

Recursos Relacionados