¿La pantalla de vista previa está en blanco y el sitio web no se muestra. Por qué?

Si el sitio web de destino ha establecido 'X-Frame-Options' o 'Content-Security-Policy' como medida de seguridad y no permite la incrustación de iframes desde otros sitios, el navegador bloqueará la visualización.

¿Puedo previsualizar una URL de entorno local (localhost)?

Sí, puede. Si tiene un servidor local ejecutándose en su PC, puede ingresar una URL como http://localhost:3000 para probarlo.

📱

vista previa responsiva,

Vista Previa Responsiva

Previsualice diseños responsivos
en 12 anchos de dispositivo con solo ingresar una URL.

📱

12 dispositivos

Desde iPhones hasta PCs

🔄

Escala y orientación

Alejar y rotar fácilmente

🔒️

Sin procesamiento en servidor

Renderizado seguro del lado del cliente

* Si el sitio no carga, es posible que restrinja la incrustación de iframes.

Escala:

Orientación:

Dispositivo:

Ingrese una URL para iniciar la vista previa

Generador de Cron

🧩

JSON a TS Interface

🔒

Comprobador de Encabezados HTTP

about,

Acerca de la Vista Previa Responsiva

La Vista Previa Responsiva es una herramienta gratuita de soporte para el desarrollo web que le permite verificar rápidamente cómo se ve una URL en varios tamaños de pantalla (teléfonos inteligentes, tabletas y computadoras de escritorio) directamente en su navegador. Incluso sin múltiples dispositivos físicos, puede probar si el diseño se rompe o verificar el comportamiento del diseño utilizando resoluciones de dispositivos estándar como iPhones, iPads y PCs.

how to,

Cómo usar

PASO 1

Ingresar URL

Pegue la URL del sitio web que desea previsualizar en el cuadro de entrada y haga clic en el botón "Previsualizar".

PASO 2

Seleccionar Dispositivo

Cambie entre las pestañas Móvil, Tableta y Escritorio y seleccione el dispositivo específico (por ejemplo, iPhone 15 Pro Max) que desea probar.

PASO 3

Ajustar Orientación y Escala

Alterne entre los modos Vertical (Portrait) y Horizontal (Landscape). Si la pantalla no cabe, ajuste la escala (por ejemplo, 50%, 75%) para ver la vista completa.

glossary,

Glosario

Diseño Web Responsivo (Responsive Web Design): Un enfoque de desarrollo web que crea cambios dinámicos en la apariencia de un sitio web, dependiendo del tamaño de la pantalla y la orientación del dispositivo utilizado.
Viewport (Ventana gráfica): El área visible de una página web para el usuario. En dispositivos móviles, se usa la etiqueta <meta name="viewport" ...> para controlar el ancho de visualización y la escala.
Media Queries (Consultas de medios): Una característica de CSS3 que permite que la representación del contenido se adapte a condiciones como la resolución de la pantalla, el ancho o el alto.

faq,

Preguntas frecuentes

P.¿La pantalla de vista previa está en blanco y el sitio web no se muestra. Por qué?: Si el sitio web de destino ha establecido 'X-Frame-Options' o 'Content-Security-Policy' como medida de seguridad y no permite la incrustación de iframes desde otros sitios, el navegador bloqueará la visualización.
P.¿Puedo previsualizar una URL de entorno local (localhost)?: Sí, puede. Si tiene un servidor local ejecutándose en su PC, puede ingresar una URL como http://localhost:3000 para probarlo.

use cases,

Casos de uso

📱

Verificación durante el desarrollo web

Pruebe rápidamente cómo se ven las páginas web recién creadas en teléfonos inteligentes o PC e identifique cualquier rotura de diseño durante el proceso de producción.

🚀