¿Cómo se ve tu sitio en iPhone SE, iPad y un monitor 4K?
Pega una URL, pulsa "Cargar", elige un preset de viewport de la barra de pastillas (iPhone SE 375×667, iPhone 14 Pro 393×852, iPad 768×1024, portátil 1280×800, FullHD 1920×1080) o mueve los dos sliders para fijar cualquier tamaño exacto en píxeles (320-2560 de ancho, 480-1440 de alto). La página se renderiza dentro de un iframe con ese ancho y alto precisos.
Es una previsualización renderizada por el navegador, no un emulador de dispositivo. El motor de tu navegador (Chrome, Firefox, Safari) hace el render, así que CSS, fuentes y layouts se comportan igual que en una pantalla real de ese tamaño. No tienes eventos táctiles, no se simula el límite de RAM de un móvil, no puedes disparar `window.matchMedia('(hover: none)')`, para eso usa Chrome DevTools o el modo responsive de Firefox.
Perfecto para comprobar breakpoints rápidamente en una revisión de código, enseñar a un cliente tres tamaños en paralelo, o verificar que el nuevo hero del design system no se rompe a 375 px.
Cómo usarla
- Pega la URL completa de la página arriba (p. ej. `https://tu-sitio.com/landing`). Puedes omitir el `https://`, lo añadimos.
- Pulsa "Cargar" o Enter. La página carga directamente desde el servidor destino al iframe, sin proxy intermedio.
- Elige un preset de dispositivo de la barra de pastillas (iPhone SE / iPhone 14 / iPad / Escritorio / FullHD) o usa los dos sliders para un tamaño personalizado.
- Las dimensiones actuales se muestran en vivo arriba a la derecha (p. ej. `390 × 844`). Pulsa "Rotar" para intercambiar ancho y alto (vertical ↔ horizontal).
- Pulsa "Refrescar" para forzar la recarga del iframe (útil tras desplegar una nueva build). "Abrir en pestaña nueva" abre la página a tamaño completo.
- Pulsa "Copiar enlace" para poner en el portapapeles una URL de previsualización con `?url=...&w=...&h=...`: compártela con un compañero y obtendrá la misma previsualización exacta.
- Si ves una tarjeta roja "El sitio bloquea el embed", el servidor destino ha enviado `X-Frame-Options: DENY/SAMEORIGIN` o `Content-Security-Policy: frame-ancestors`. Ábrelo en pestaña nueva: el navegador lo renderizará allí con normalidad.
Cuándo es útil
Siete situaciones típicas donde una comprobación responsive rápida supera a abrir DevTools:
- Revisar un PR de un nuevo componente. Un junior sube un nuevo hero, en 30 segundos compruebas si funciona en iPhone SE (el móvil más pequeño aún en uso), iPad y portátil. Sin necesidad de clonar el repo.
- Demo a un cliente. Llamada de Zoom, abres tres pestañas de esta herramienta con presets distintos y muestras la misma página en escritorio, tablet y móvil simultáneamente. El cliente ve que todo funciona.
- Reproducción de bug en QA. Un tester reportó "el menú se rompe a 412 px de ancho". Pones exactamente 412 en el slider, reproduces el bug, capturas pantalla, adjuntas al ticket de Jira.
- Estudiar a la competencia. Una diseñadora quiere ver cómo se ve el sitio de un competidor en 4K (1920×1080) y en un Galaxy S22 (360×800). Pega URL, pulsa preset, listo.
- Validar una landing antes de una campaña de Google Ads. La aprobación del anuncio requiere "mobile-friendly". Verifica a 375 px que el CTA es visible sin scroll y que las fuentes no son menores de 16 px.
- Comprobar un sitio desde la vista móvil mientras estás en el ordenador. Obtén la previsualización 375×667 sin sacar el móvil y sin desplegar a staging.
- Comprobación rápida tras desplegar. Has subido 2.3.0 a producción, comprueba tres tamaños que nada se haya roto. "Refrescar" carga la versión nueva (caché HTML invalidada, aunque los assets del CDN pueden persistir).
Tras comprobar el layout, verifica también cómo se ve el enlace en redes sociales: usa la previsualización OpenGraph. Y comprueba SSL (inspector de certificados SSL) y DNS (consulta DNS): cuando una página carga lenta o no carga, el problema suele estar ahí.