¿Cómo simular una pantalla de mayor resolución? [cerrado]

94

¿Existe alguna forma de que el navegador pruebe mis sitios web en resoluciones superiores a las de mis pantallas?

Por ejemplo: tengo una pantalla de 1440 x 900 y quiero probar el sitio web en 1920 x 1200, 1920 x 1080, etc.

html css resolution HappyDesarrollador
fuente
@deceze en realidad es una muy buena sugerencia. El objetivo de que surjan cosas como 960.gs es que si trabaja con tamaños de píxeles, su diseño se ve igual en todas partes, solo ocupa diferentes cantidades de espacio en la pantalla según la resolución de la pantalla. No es necesario probar los gráficos que se repiten horizontalmente en alta resolución siempre que pueda ver un total de 2 repeticiones y un poco para asegurarse de que las costuras estén alineadas. O simplemente puede usar el principio de la cigarra para producir algo más interesante.
Endophage
1
@Endophage: No estoy de acuerdo. La creación de diseños fluidos adecuados a menudo ofrece mejores resultados con respecto, por ejemplo, a las preferencias de tamaño de fuente del usuario. Tener el mismo aspecto en todas partes no es esencial, es solo un vistazo de píxeles.
Usted
@Tú Aún no he visto un diseño fluido que cambie el tamaño de fuente. Tenga en cuenta que la razón por la que los anchos de píxel fijos son buenos es porque el ojo humano tiene dificultades para escanear líneas de cierta longitud (creo que se ha encontrado que tiene aproximadamente 20 palabras con un tamaño de fuente de alrededor de 12 px, puede buscarlo usted mismo). Si estás hablando de bajar a resoluciones de teléfono, eso es una historia diferente, pero si estás hablando de resoluciones de escritorio / portátil, si solo tengo una pantalla grande con una alta resolución y cambio el tamaño de la ventana, estoy probando efectivamente diferentes resoluciones.
Endophage
1
@Endophage: De ahí la necesidad de usar 40em(o una medida similar), no 960px, como su ancho. Los píxeles no se escalan cuando decido que el tamaño de fuente de 12 píxeles es demasiado pequeño para mí y presiono Cmd- +. Además, la ventana de mi navegador tiene apenas 960 px.
Usted
@De hecho, los píxeles se escalarán cuando pulses Ctrl/Cmd +porque es una función de zoom. Puedes probarlo aquí mismo en SO. La sección de contenido principal tiene 960 píxeles de ancho. Usar algo como 40em no se adaptará a la resolución de la pantalla. El uso de emtamaños es relativo al tamaño de fuente del elemento principal que se hereda hasta 1em / 16px en el nivel superior a menos que se anule (y disculpas, debería haber sido 12pt, no px en mi comentario anterior). Leer: kyleschaeffer.com/best-practices/…
Endophage

Respuestas:

76

[Editar: ¡Primero revisa las herramientas de desarrollo de tu navegador! Como señala @SkylarIttner en los comentarios, las herramientas para las pruebas de diseño receptivo se han implementado en la mayoría de los navegadores desde que se publicó la siguiente solución. Probablemente sean la mejor y más fácil opción ahora.]

Podrías corregirme si me equivoco, simplemente crear un iframe con style="desired width & height"y src="your/test.site"como hijo único de <body>. Debe mostrar el sitio como si la resolución fuera el ancho / alto especificado y dar como resultado barras de desplazamiento para examinarlo.

No es tan conveniente como usar un tercero, tener que configurarlo usted mismo, pero tiene la ventaja de poder realizar pruebas localmente sin conexión a Internet.

Cody Crumrine
fuente
5
Por qué ... debo decir, eso es genial. +1
Mafia
¡Por supuesto! ¡Gracias! ^^
Oskar Duveborn
¡No puedo agradecerles lo suficiente!
Rahman Sharif
1
Gracias por todos los comentarios positivos, chicos. Es bueno saber cuándo las cosas son útiles.
Cody Crumrine
1
En la posibilidad de que ayude a alguien, aquí está el código de muestra para hacer lo que sugirió @Cody Crumrine y es Genius !! <iframe src = " site to test.com" width = "1024" height = "768"> </iframe>
Stuart
28

Esta solución es mucho más rápida que las propuestas anteriormente:

http://www.infobyip.com/testwebsiteresolution.php

No es tan versátil como browsershots.org, pero es mucho más rápido (unos segundos frente a una cola de 45 minutos).

Kyle
fuente
Esta no es una mala respuesta. Sin embargo, ese sitio no proporciona absolutamente nada que no pueda hacer usted mismo simplemente cambiando el tamaño de la ventana del navegador en cualquier computadora de escritorio. En mi humilde opinión, los enlaces en esa página para tabletas y teléfonos son totalmente inútiles ... porque en una pequeña pantalla de iPod, Mobile Safari cambia automáticamente el tamaño de mi sitio de 1000 píxeles para que se muestre perfectamente bien.
Sparky
4
@ Sparky672, personalmente no puedo cambiar el tamaño de mi navegador para que sea más grande que la resolución de mi pantalla. El OP pedía ver 1920 en una 1440. Tal vez haya una manera, pero ¿es tan fácil como la solución de infobyip? Disculpas si estoy pasando por alto algo obvio (siento que podría estarlo).
Kyle
2
Gracias @ Sparky672 y no hay problema. Pero, ¿no debería eliminar su comentario "ese sitio no proporciona absolutamente nada que no pueda hacer usted mismo simplemente cambiando el tamaño de la ventana del navegador en cualquier computadora de escritorio", ya que eso no es cierto?
Kyle
1
@ Sparky672, ¿qué pasa con la vertical?
Kyle
1
Utilizo vertical para ver qué cae por encima y por debajo del pliegue. Lo combino con StatsCounter y MouseFlow para ver qué porcentaje de la audiencia ve qué. ¡Te amo Sparky! Creo que estás leyendo mal mi tono. Y quería ser útil. Nadie examinará la solución que proporciono con 0 votos y una lista de comentarios. Pero bueno ...
Kyle
9

Algunas ideas:

Use el zoom del navegador, 1024x768 50% de zoom = 2048x1536 resolución simulada, sé que Chrome cambia el tamaño de las imágenes y similares. Las cosas se vuelven difíciles de leer, pero supongo que estás probando la ubicación y demás.

También puede usar algunos programas de captura de pantalla para tomar capturas de pantalla con una resolución superior a la normal (fireshot en Firefox me permitió hacer esto, pero tuve problemas de memoria con resoluciones realmente altas y ya no es gratis).

StrangeWill
fuente
6

Una solución, quizás exagerada, sería usar Xvfb : establezca la resolución y profundidad de color deseadas, cargue su página en los navegadores y tome capturas de pantalla.

Eugen Constantin Dinca
fuente
4

Pruebe viewlike.us o screen-resolution.com . No son todas las posibles resoluciones, pero al menos las más comunes.

No los he probado pero parece bastante sencillo.

Eddie Cheng
fuente
screen-resolution arroja esto: "La resolución de su pantalla es demasiado pequeña La ventana emergente que seleccionó es demasiado grande para la resolución de pantalla que usa. La resolución de su pantalla es 1440 píxeles por 900 píxeles. La ventana emergente que intentó abrir es 1920 píxeles por 1200 "
HappyDeveloper
view like us arroja esto: "Prohibido No tiene permiso para acceder / en este servidor. Además, se encontró un error 404 No encontrado al intentar usar un ErrorDocument para manejar la solicitud. Apache mod_fcgid / 2.3.6 mod_auth_passthrough / 2.1 mod_bwlimited / 1.4 FrontPage / 5.0.2.2635 Servidor en viewlike.us Puerto 80 "
HappyDeveloper
2

Aunque esto no le dirá la resolución exacta de su prueba, puede usar la zoomherramienta en Chrome o FF para alejar. Esto le dará una idea bastante precisa de cómo se ve el sitio en pantallas de mayor resolución.

Jason Gennaro
fuente
2

Si está de acuerdo con ver una captura de pantalla estática de su sitio, le recomiendo http://browsershots.org/

Le dan la opción de ver capturas de pantalla de su sitio en prácticamente cualquier combinación de navegador / sistema operativo, incluida la capacidad de especificar el tamaño de la pantalla, además de un montón de otras opciones.

Vale la pena marcarlo como favorito.

Spudley
fuente
1

Es posible que desee probar wkhtmltoimage , que puede tomar capturas de pantalla con resoluciones arbitrarias.

Además, en KDE4 es posible ampliar una ventana más allá del tamaño de la pantalla. Creo que también lo he visto en Windows 7. No estoy seguro de otros sistemas operativos.

usuario123444555621
fuente
1

IE9 le permite cambiar el tamaño de la ventana del navegador a un tamaño arbitrario: presione F12 para las herramientas de desarrollador, vaya a Herramientas | Cambie el tamaño y elija su tamaño preferido. Luego use alguna herramienta que pueda capturar ventanas fuera de la pantalla si la ventana es más grande que su pantalla. Este artículo parece indicar que Snagit puede hacer esto. Entonces solo eche un vistazo a la foto capturada.

Jaco Briers
fuente