WAVESPEED AI PROBADOR RESPONSIVE Tu código se queda en tu dispositivo

100% GRATIS

Probador de diseño responsive gratisMira tu página en todos los tamaños de pantalla a la vez.

Introduce la dirección de un sitio web o pega tu HTML y míralo en marcos del tamaño de pantallas reales de móvil, tableta, portátil y escritorio, uno al lado del otro o de uno en uno.
Arrastra un marco hasta cualquier ancho, gíralo, salta entre breakpoints habituales, detecta el contenido que se sale por los lados y guarda capturas de tu HTML.

Más de 40 tamaños de pantallaVista lado a ladoDetector de desbordamiento

Sin registro Sin proxy Sin marca de agua

Cargando el probador…

El HTML pegado se queda en tu navegador. Los sitios web se cargan directamente desde sus propios servidores.

TRES PASOS SENCILLOS

Cómo probar un diseño responsive

Añade tu página

Escribe la dirección de un sitio web, o cambia a HTML y pega tu código o abre un archivo .html. La página de ejemplo muestra cómo funciona.

Elige las pantallas

Mira un solo dispositivo y arrastra sus bordes, o pon un móvil, una tableta, un portátil y un escritorio uno al lado del otro. Gira cualquiera de ellos.

Corrige y captura

Lee los avisos sobre contenido más ancho que la pantalla, edita tu HTML y mira cómo se actualiza cada marco; luego guarda capturas.

Consejos para diseños que aguantan en cualquier tamaño

Empieza en 320 píxeles

Los móviles más estrechos en uso miden de 320 a 360 píxeles CSS de ancho. Si el diseño aguanta ahí, aguanta casi en cualquier parte.

Arrastra, no te limites a elegir dispositivos

Los breakpoints también fallan entre dispositivos. Arrastra el marco despacio de estrecho a ancho y fíjate en el momento en que algo salta o se solapa.

No olvides nunca la etiqueta viewport

Sin <meta name="viewport" content="width=device-width, initial-scale=1"> los móviles maquetan la página con unos 980 píxeles de ancho y la reducen hasta que el texto es diminuto.

WaveSpeed AI

Del diseño a los visuales

Cuando la página funcione en todos los tamaños, crea las imágenes y los clips que necesita con WaveSpeed AI.

Empezar a crear Explora más de 1.000 modelos de IA

Más de 1.000 modelos de IA
Imagen, vídeo y 3D
Paga por uso

$1 en créditos gratis para cuentas nuevas elegibles. Sin tarjeta. Los generadores tienen requisitos de cuenta y créditos aparte. Probador responsive: gratis.

Preguntas frecuentes sobre el probador responsive

¿Este probador de diseño responsive es gratis?

Sí. Sin cuenta, sin límites de dispositivos ni de páginas, sin marca de agua en las capturas y sin nada que instalar: funciona en tu navegador.

¿Cómo pruebo mi sitio web en distintos tamaños de pantalla?

Introduce la dirección de tu sitio o pega tu HTML y elige entre más de 40 tamaños de móvil, tableta, portátil y escritorio, de uno en uno o lado a lado. Arrastra un marco hasta cualquier ancho, gíralo o salta a breakpoints habituales.

¿Qué tan precisos son los tamaños de los dispositivos?

Cada marco es un viewport de navegador con el ancho y el alto exactos de esa pantalla en píxeles CSS, así que tus media queries, diseños y breakpoints responden igual que en ese dispositivo.

¿Puedo probar mi propio HTML o un sitio local?

Sí. Pega tu HTML o abre un archivo .html para previsualizarlo en todos los tamaños y editarlo en directo. Los sitios web se cargan por https; para un servidor de desarrollo local, usa un túnel https o pega el HTML generado.

¿Encuentra problemas de diseño?

Sí. En tu HTML marca los elementos más anchos que la pantalla, la causa habitual del desplazamiento lateral en móviles, y avisa cuando falta la metaetiqueta viewport.

¿Puedo guardar capturas?

Sí, para el HTML pegado: guarda el área visible o la página completa como PNG a la proporción de píxeles del dispositivo, así que un marco de 393 píxeles de ancho a 3x da una imagen de 1179 píxeles de ancho.

¿Qué significa la etiqueta de proporción de píxeles?

Los móviles concentran de dos a cuatro píxeles físicos en cada píxel CSS. La etiqueta muestra esa proporción, y las capturas del HTML pegado se guardan con ella, para que coincidan con la nitidez de la pantalla real.

¿Mi página pasa por vuestros servidores?

No. Tu navegador carga el sitio web directamente desde su propio servidor, dentro de los marcos, sin ningún proxy de por medio. El HTML pegado y las capturas se quedan en tu navegador; tu última página y tus ajustes se guardan en el almacenamiento de este navegador.

¿Por qué un sitio web se queda en blanco?

Algunos sitios eligen no mostrarse dentro de otras páginas. Abre "¿Por qué está en blanco?" para revisar las cabeceras del sitio, o pega el HTML de la página en su lugar.

Todas las herramientas gratis