Prueba de sitio web responsivo (ver en celular, tablet y computadora)
Escribe la dirección del sitio y elige las pantallas. Cada marco tiene el ancho real del dispositivo, reducido para caber aquí.
Cómo usarTu sitio en varias pantallas a la vez
Prueba de sitio web responsivo (ver en celular, tablet y computadora): para qué sirve
Antes de publicar, verifica que el sitio funcione en pantallas de todos los tamaños. Escribe la dirección y mira el sitio lado a lado en celular pequeño (360 px), iPhone SE (375 px), iPhone 15 (393 px), tablet (768 px), laptop (1366 px) y Full HD (1920 px), cada uno con el ancho real y reducido para caber en la pantalla.
Gira a horizontal, crea un ancho personalizado y recarga todos los marcos a la vez. Funciona con tu localhost y con sitios que permiten abrirse dentro de otro; los que lo bloquean por seguridad (X-Frame-Options) aparecen en blanco, y la página explica el motivo.
Cómo usar
- Escribe la dirección del sitio.
- Elige las pantallas y el zoom.
- Desplázate entre los marcos y revisa el diseño.
Cuándo usar
- Revisar un sitio antes de publicarlo.
- Mostrar al cliente cómo se ve en el celular.
- Probar media queries.
Preguntas frecuentes
¿Por qué algunos sitios aparecen en blanco?
Muchos sitios (Google, Instagram, bancos) envían un encabezado de seguridad (X-Frame-Options o frame-ancestors) que prohíbe mostrarse dentro de otro sitio, para evitar estafas de clickjacking. Tu propio sitio normalmente funciona; si no funciona, también tiene esa protección, lo cual es bueno.
¿Es igual a verlo en un celular de verdad?
El ancho es el mismo, así que el diseño, las media queries y los saltos de línea quedan iguales. Lo que cambia es el tipo de toque, la fuente del sistema y la densidad de píxeles.
¿Puedo probar un sitio que todavía está en mi computadora?
Sí. Escribe la dirección local, como http://localhost:3000.
¿Es gratis de verdad?
Sí, 100% gratis. Sin registro, sin suscripción y sin límite de uso. Todas las herramientas de Tools123 son gratuitas.