Vista previa responsiva
Visualiza cualquier sitio web en tamaños de celular, tableta y computadora, y compáralos lado a lado sin abrir las herramientas de desarrollador del navegador.
Vista previa del sitio web
Compara celular, tableta y computadora de un vistazo
La misma página mostrada en tres anchos lado a lado, para que puedas detectar errores de diseño sin cambiar de tamaño uno por uno.
Celular390 x 844
Tableta768 x 1024
Computadora1440 x 900
Cómo funciona
Una herramienta de vista previa responsiva carga un sitio web dentro de un iframe ajustado al ancho y alto del dispositivo elegido, escalado para caber en la pantalla, para que puedas verificar un diseño responsivo en tamaños de celular, tableta y computadora sin redimensionar la ventana del navegador ni abrir las herramientas de desarrollador.
- Ingresa una URL
Escribe una dirección y haz clic en Vista previa, o presiona Enter.
- Elige un tamaño
Elige un tamaño predefinido de dispositivo o establece un ancho y alto personalizados de hasta 3.840 px.
- Comparar
Rota, activa o desactiva el marco del dispositivo, o desplázate hacia abajo para ver el celular, la tableta y la computadora juntos.
Qué verifica esta herramienta y qué no
La vista previa renderiza la página al tamaño lógico en píxeles CSS del dispositivo elegido, por lo que es precisa para comprobar el diseño, los puntos de quiebre y las imágenes responsivas que usan consultas de medios CSS o el atributo sizes.
- Relación de píxeles del dispositivo: el iframe no simula la mayor densidad de píxeles de una pantalla Retina, por lo que una imagen reemplazada solo mediante una consulta min-resolution podría no coincidir exactamente con un dispositivo real.
- Táctil y pasar el cursor: esta es una pestaña de navegador controlada con mouse, así que las interacciones que solo funcionan al pasar el cursor se comportan como en una computadora de escritorio, no como en una pantalla táctil.
- Incrustación bloqueada: un sitio que envía un encabezado X-Frame-Options o frame-ancestors rechaza cargarse en cualquier iframe, incluido este; esa es la configuración de seguridad del propio sitio, no algo que una herramienta de vista previa pueda anular.
Para pruebas con precisión de píxel
Usa la emulación de dispositivos de tu propio navegador (barra de herramientas de dispositivos de DevTools) o un dispositivo físico. Esta herramienta es la más rápida para una comprobación veloz del diseño en varios anchos a la vez, pero no sustituye las pruebas en hardware real antes del lanzamiento.
Preguntas frecuentes
¿Cómo previsualizo un sitio web en distintos tamaños de pantalla sin abrir las herramientas de desarrollo del navegador?
Ingresa la URL del sitio y haz clic en Vista previa. Luego elige un tamaño predefinido de dispositivo: iPhone SE (375x667), iPad (768x1024), Escritorio (1440x900) y otros, o escribe un ancho y alto personalizados. El sitio se carga dentro de un iframe escalado que coincide con esa ventana gráfica. Haz clic en Rotar para alternar entre vertical y horizontal.
¿Qué tamaños de dispositivo incluye la herramienta de vista previa responsiva?
Los tamaños predefinidos incluyen iPhone SE (375x667), iPhone 14 (390x844), iPad (768x1024), iPad Pro (1024x1366), MacBook (1280x800) y computadora de escritorio (1440x900). También puedes ingresar cualquier ancho y alto personalizado de hasta 3.840 px y hacer clic en Aplicar tamaño personalizado para obtener una vista previa de un punto de ruptura no estándar.
¿Puedo comparar celular, tableta y computadora de escritorio al mismo tiempo?
Sí. Debajo de la vista previa principal, la sección Comparar muestra la misma URL con anchos de celular, tableta y computadora de escritorio uno al lado del otro, para que puedas identificar dónde se rompe el diseño sin tener que cambiar de tamaño uno por uno.
¿Por qué un sitio web no carga en la vista previa responsiva?
Muchos sitios bloquean la inserción de iframes mediante los encabezados HTTP X-Frame-Options o Content-Security-Policy: frame-ancestors. Cuando un sitio envía estos encabezados, el navegador se niega a mostrarlo dentro de cualquier iframe. Esta es una medida de seguridad del servidor y no puede ser evitada por una herramienta de vista previa. Los sitios afectados suelen incluir motores de búsqueda, redes sociales y sitios bancarios.
¿Cómo pruebo el diseño de un sitio en orientación horizontal?
Después de seleccionar un dispositivo predefinido, por ejemplo iPhone 14 a 390x844, haz clic en el botón Rotar. Esto intercambia el ancho y el alto a 844x390, simulando el modo horizontal. El tamaño mostrado encima de la vista previa se actualiza para coincidir. Haz clic en Rotar nuevamente para volver al modo vertical.
¿Cuál es una limitación de la vista previa responsiva basada en iframes?
La vista previa muestra el sitio en las dimensiones de píxeles lógicos del área de visualización elegida, pero no replica la relación real de píxeles del dispositivo. Las imágenes de alta resolución o las consultas de medios orientadas a min-resolution pueden no comportarse igual que en un dispositivo real. Para pruebas con precisión de píxel, usa la emulación de dispositivos de tu navegador o un dispositivo físico.