Simulador de resolución de pantalla

¿Cómo se ve tu página en otra pantalla?

Diseñas tu web en el ordenador, pero la mayoría de tus visitantes la abre en el teléfono. El simulador de resolución de pantalla de Jood muestra cualquier página con el ancho de pantalla que elijas, desde un teléfono Android de 360 píxeles hasta un ordenador de sobremesa de 1920. Así ves cómo quedan las columnas, los menús y las imágenes para alguien que usa ese dispositivo.

Cómo se usa

1. Pega la dirección en la casilla «URL de la página».
2. Elige un dispositivo en la lista «Resolución de pantalla», o elige «Otro tamaño» y escribe el ancho y el alto en píxeles.
3. Pulsa «Empezar ahora». La página se dibuja con su ancho real y luego se reduce para que quepa en tu pantalla, con el porcentaje de reducción.

La página de la vista previa funciona de verdad: puedes desplazarte por ella y pulsar sus enlaces.

¿Por qué 390 y no 1170?

La pantalla de un iPhone tiene más de mil píxeles de ancho, pero el navegador la trata como si tuviera 390 y dibuja cada uno de esos píxeles con varios puntos para que el texto se vea nítido. Esos tamaños lógicos son los que ve tu web, y sobre ellos se construyen las reglas del diseño adaptable. Por eso la lista los usa.

Webs que no se dejan mostrar en un marco

La vista previa muestra la página dentro de un marco (iframe). Muchas webs, como Google, los bancos o las redes sociales, lo prohíben por seguridad con la cabecera X-Frame-Options o frame-ancestors. La herramienta lee primero las cabeceras: si encuentra esa prohibición, te lo dice en vez de mostrar un recuadro vacío y te ofrece el botón «Abrir en una ventana de este tamaño». En el ordenador, ese botón abre la página en una ventana aparte con el ancho y el alto elegidos.

Límites de la vista previa

• Solo cambia el ancho de la página. La web no sabe que estás en un teléfono: si envía una versión móvil según el tipo de dispositivo, no la verás aquí.
• No imita el táctil ni la densidad de píxeles, así que el texto puede verse más o menos nítido que en un teléfono real.
• Para una revisión precisa, abre las herramientas para desarrolladores de Chrome con F12, luego el modo de dispositivos con Ctrl+Shift+M, y prueba en un teléfono real antes de publicar.

Tamaños que conviene probar

Prueba al menos 360 para teléfonos pequeños, 390 para el iPhone, 768 para tabletas y 1366 para los portátiles más comunes. En esos límites es donde suelen romperse los diseños: un menú que no se convierte en botón, una tabla que se sale de la pantalla, una imagen más ancha que la página.

Cuando el diseño esté bien, revisa la página de cara a los buscadores con la Auditoría SEO completa del sitio.