Comprobador de diseño responsive
Mira cómo se ve una página web en un iPhone, un teléfono Android, un iPad, un portátil y un monitor grande sin tenerlos. Introduce una URL, elige un dispositivo o un ancho personalizado, gira a horizontal y reduce el zoom para ver el diseño completo.
Última actualización:
Los marcos son vistas de navegador reales con el ancho exacto en píxeles CSS, así que las media queries se activan como en el dispositivo. La página se carga directamente en tu navegador; no se nos envía nada. Muchos sitios grandes (Google, Facebook, bancos) prohíben mostrarse dentro de un marco con X-Frame-Options o Content-Security-Policy: frame-ancestors; un marco en blanco o un mensaje de "rechazó la conexión" significa eso, no un fallo de diseño. Para esos sitios, usa Abrir en una pestaña nueva y el modo de dispositivo de tu navegador.
Cómo usar Comprobador de diseño responsive
- Introduce la dirección de la página, por ejemplo example.com/pricing, y haz clic en Comprobar sitio. Se añade https:// automáticamente.
- Elige un dispositivo de la lista, escribe un ancho y un alto o haz clic en un breakpoint como 768 o 1024.
- Gira para ver la orientación horizontal y cambia el Zoom para ver un diseño de escritorio grande de un vistazo.
- Cambia a Todos los tamaños para comparar móvil, tableta, portátil y escritorio uno al lado de otro. Desplázate y haz clic dentro de cada marco como en un navegador real.
- Corrige y recarga: después de cambiar tu CSS, pulsa Recargar para actualizar todos los marcos.
Tamaños de viewport habituales (píxeles CSS)
| Dispositivo | Viewport (vertical) | Relación de píxeles del dispositivo | Resolución física |
|---|---|---|---|
| iPhone SE (2.ª/3.ª gen.) | 375 × 667 | 2 | 750 × 1334 |
| iPhone 15 / 15 Pro | 393 × 852 | 3 | 1179 × 2556 |
| iPhone 15 Pro Max | 430 × 932 | 3 | 1290 × 2796 |
| Samsung Galaxy S23 | 360 × 780 | 3 | 1080 × 2340 |
| Google Pixel 8 | 412 × 915 | 2.625 | 1080 × 2400 |
| iPad mini (6.ª gen.) | 744 × 1133 | 2 | 1488 × 2266 |
| iPad Air 11" | 820 × 1180 | 2 | 1640 × 2360 |
| iPad Pro 12.9" | 1024 × 1366 | 2 | 2048 × 2732 |
| Portátil (habitual) | 1366 × 768 / 1536 × 864 | 1 / 1.25 | 1366 × 768 / 1920 × 1080 |
| Monitor de escritorio | 1920 × 1080 | 1 | 1920 × 1080 |
El viewport es el área que puede usar la página web, medida en píxeles CSS. Las barras del navegador ocupan parte de la altura, así que la altura visible en un teléfono real suele ser algo menor que la cifra de arriba. Los viewports de los portátiles dependen del escalado de pantalla del sistema operativo: una pantalla de 1920 × 1080 al 125% de escala da un viewport de 1536 × 864.
Lista de comprobación responsive
- Metaetiqueta viewport: la página necesita
<meta name="viewport" content="width=device-width, initial-scale=1">; si no, los teléfonos la muestran a unos 980 px de ancho y la encogen. - Sin scroll lateral a 320 o 360 px. Dale a las imágenes
max-width:100%, envuelve las tablas anchas en un contenedor con desplazamiento y deja que las palabras o URL largas se corten conoverflow-wrap:anywhere. - Zonas táctiles de al menos unos 44 × 44 px con espacio entre ellas, y texto principal de al menos 16 px para que iOS no amplíe los campos de formulario.
- Navegación que se pliegue bien en un menú, sin nada oculto detrás de una cabecera fija.
- Horizontal en teléfonos: las cabeceras fijas y las secciones a altura completa (
100vh) suelen dejar poco espacio; considera100dvh. - Breakpoints según el contenido, no los dispositivos: ensancha el marco poco a poco con anchos personalizados y añade un breakpoint donde el diseño empiece a verse mal.
Por qué algunos sitios no se pueden previsualizar
Cualquier comprobador responsive que muestre páginas en vivo funciona con marcos, y los propietarios de los sitios pueden prohibir que se muestren en ellos. Un sitio que envíe X-Frame-Options: DENY o SAMEORIGIN, o Content-Security-Policy: frame-ancestors 'self', mostrará aquí un marco en blanco o de "rechazó la conexión". Si es tu propio sitio y quieres probarlo en marcos, permítelo temporalmente en una copia de staging, o usa la barra de dispositivos de las herramientas para desarrolladores de Chrome, Edge o Firefox (Ctrl+Mayús+M o Cmd+Mayús+M), que usa los mismos tamaños de viewport.
Preguntas frecuentes
¿Por qué un sitio web muestra un marco en blanco o 'rechazó la conexión'?
El sitio prohíbe mostrarse dentro de un marco en otro sitio enviando la cabecera X-Frame-Options o una regla frame-ancestors de Content-Security-Policy. Es un ajuste de seguridad contra el clickjacking y es habitual en Google, redes sociales, bancos y muchas aplicaciones web. No es un fallo de diseño responsive. Abre la página en una pestaña nueva y usa en su lugar el modo de dispositivo de tu navegador (F12 y luego el icono del teléfono).
¿Es lo mismo que probar en un teléfono real?
El diseño es el mismo: cada marco tiene exactamente el ancho y el alto de viewport CSS del dispositivo, así que las media queries CSS, flexbox y grid se comportan como en el teléfono. Lo que no emula es la cadena de user agent del dispositivo, la densidad de píxeles, la entrada solo táctil ni las barras del navegador. Los sitios que detectan teléfonos por el user agent pueden seguir enviando su versión de escritorio, así que revisa también las páginas importantes en un dispositivo real.
¿Qué tamaños de pantalla debo probar?
Cubre el teléfono habitual más estrecho (360 o 375 px de ancho), un teléfono grande (unos 430 px), una tableta en vertical (768 a 834 px) y en horizontal (1024 a 1180 px), un portátil (1280 a 1440 px) y un escritorio (1920 px). Los problemas suelen aparecer justo por debajo y por encima de cada breakpoint de tu CSS, así que prueba también anchos unos píxeles a cada lado.
¿Por qué los tamaños son menores que la resolución del teléfono?
Los teléfonos tienen pantallas de alta densidad: un iPhone 15 tiene 1179 × 2556 píxeles físicos, pero informa de 393 × 852 píxeles CSS con una relación de píxeles del dispositivo de 3. Las páginas web se maquetan en píxeles CSS, así que esos son los tamaños que importan para el diseño responsive, y son los que aparecen aquí.
¿Puedo probar mi sitio local o de staging?
Sí, siempre que tu propio navegador pueda abrirlo. Los marcos se cargan directamente desde tu ordenador, así que http://localhost o una dirección de intranet funcionan cuando abres la página por http. Los navegadores bloquean las páginas http:// dentro de una página https://, así que para localhost puede que tengas que ejecutar el servidor de desarrollo por https o usar Abrir en una pestaña nueva.
¿La herramienta recopila los sitios que compruebo?
No. La página que introduces la carga tu propio navegador dentro de los marcos, exactamente igual que si la visitaras. No se envía nada a nuestros servidores, y la última URL y el último tamaño solo se guardan en tu navegador para que la herramienta pueda restaurarlos la próxima vez.
¿Por qué la página muestra un aviso de scroll horizontal?
En las páginas de este mismo sitio web, la herramienta puede medir el contenido y avisa cuando es más ancho que la pantalla, el fallo de diseño móvil más común. Suele deberse a un elemento de ancho fijo, una imagen o tabla ancha o un texto largo sin cortes. En otros sitios el navegador no permite esa medición, así que busca una barra de desplazamiento lateral dentro del marco.
¿Se prueban todas las herramientas de FreeToolCabin para comprobar su calidad y precisión?
Sí. Cada herramienta del sitio pasa pruebas automáticas en navegadores reales para comprobar que el resultado es correcto y que no hay errores. Si encuentras un fallo o tienes una sugerencia, escríbenos a [email protected] y lo revisaremos.