Simulador de Resolución de Pantalla Gratis
Este simulador de resolución de pantalla gratis muestra tu tamaño de pantalla y ventana del navegador, y previsualiza cualquier página web al ancho de un teléfono, tablet, portátil o escritorio. Elige un dispositivo o escribe un ancho, pega una dirección de página y la página se carga en un marco a ese tamaño. Una tabla de tamaños de dispositivos comunes funciona incluso sin JavaScript.
Screen Resolution Simulator
Domain and Server
Sobre esta herramienta
Una página que se ve bien en tu portátil puede romperse en un teléfono pequeño, y la única forma honesta de saberlo es verla a ese ancho. Esta herramienta carga tu página en un marco al ancho que elijas, para que puedas verificar menús, imágenes y botones a 360, 390, 768 o 1366 píxeles sin poseer cada dispositivo. También informa tu propio tamaño de pantalla y ventana, que los equipos de soporte a menudo solicitan.
Los números son píxeles CSS, las unidades que usa el diseño de una página web, no los píxeles físicos de una pantalla. Un teléfono con una pantalla muy nítida aún reporta un viewport de aproximadamente 360 a 430 píxeles CSS de ancho, que es lo que tu diseño debe ajustarse. La tabla enumera tamaños típicos para clases de dispositivos populares. Los dispositivos reales difieren, y las barras del navegador ocupan algo de altura, así que trata los tamaños como una guía cercana en lugar de una medición exacta.
Muchos sitios web prohíben ser mostrados dentro de otra página, para proteger a los visitantes de trucos de clic. Cuando un sitio envía esa instrucción, esta herramienta la detecta, no muestra vista previa y lo indica, en lugar de mostrar una caja en blanco. Tu propio sitio puede ser enmarcado si no envía X-Frame-Options o una regla frame-ancestors. Una vista previa enmarcada tampoco ejecuta media queries en el dispositivo mismo, así que confirma diseños importantes en un teléfono real antes de lanzar.
Preguntas frecuentes
¿Por qué la vista previa dice que la página no puede ser enmarcada?
Muchos sitios, incluidos bancos, redes sociales y grandes tiendas, envían un encabezado que prohíbe mostrar la página dentro de otra página, como protección contra el secuestro de clics. El navegador mostraría una caja en blanco, así que la herramienta te lo indica en su lugar. Prueba esos sitios en el modo de dispositivo de las herramientas de desarrollador de tu navegador.
¿Cuál es la diferencia entre el tamaño de pantalla y el tamaño de viewport?
El tamaño de pantalla es la pantalla completa de tu dispositivo. El viewport es la parte de la ventana del navegador que muestra la página web, que es más pequeña debido a las barras de herramientas y barras de desplazamiento. Los diseños reaccionan al viewport, así que ese es el número que importa para el diseño responsivo.
¿Son exactos los tamaños de dispositivos?
Son tamaños típicos de píxeles CSS para clases de dispositivos comunes. Los teléfonos y tablets varían según el modelo y el software, y las barras del navegador cambian la altura. Son lo suficientemente precisos para detectar problemas de diseño, pero siempre prueba páginas importantes en un dispositivo real antes de lanzar.
¿Esto prueba mi sitio en un teléfono real?
No. Reduce el marco a un ancho de teléfono, para que la página aplique sus reglas de diseño móvil, pero aún se ejecuta en tu navegador actual. El comportamiento táctil, las fuentes, las barras del navegador y el rendimiento pueden diferir en un teléfono real. Úsalo como una verificación rápida inicial, no como la prueba final.
¿Se guarda la dirección que ingreso?
No. Nuestro servidor solicita la página una vez para leer sus encabezados de enmarcado y luego la olvida. La vista previa misma se carga directamente desde el sitio web en tu navegador. No guardamos la dirección, el contenido de la página ni tu tamaño de pantalla.