¿Cómo probar un sitio web para Retina en Windows sin una pantalla Retina real?

¿Hay alguna forma de simular una pantalla Retina en Windows para probar un sitio web para pantallas HiDPI como Retina?

Ejecuto Windows en un monitor estándar de 24 "1920 x 1080. Anoche revisé mi sitio web en la nueva MacBook Pro Retina de 15" de un amigo y los gráficos se veían borrosos (mucho peor que en una MacBook normal de 15 pulgadas), mientras que la fuente era súper nítido y nítido, lo que hace que el logotipo parezca aún peor debido a la comparación directa.

He seguido este tutorial para preparar mi sitio web Retina:

http://line25.com/tutorials/how-to-create-retina-graphics-for-your-web-designs

Usé el enfoque retina.js ya que no tengo imágenes de fondo.

¿Hay alguna forma de probar si esto realmente funciona? Obviamente, podría pedirle a mi amigo que use su Retina Notebook, pero ese no es un flujo de trabajo viable para mí. Quiero poder probar al menos aproximadamente la compatibilidad de los sitios web con Retina en mi propio entorno.

acerca de: truco de configuración en Firefox

De hecho, puedes usar Firefox:

1. Ve a "about: config"
2. Busque "layout.css.devPixelsPerPx
3. Cámbielo a la proporción deseada (1 para normal, 2 para retina, etc. -1 parece ser el predeterminado).

Captura de pantalla:

Actualice su página: ¡boom, su consulta de medios ahora ha comenzado! ¡Me quito el sombrero ante Firefox por ser increíble para el desarrollo web! Atención, ahora el sitio web no solo aumentará al doble de tamaño, sino que también duplicará la interfaz de usuario de Firefox. Esta duplicación o ampliación es necesaria, ya que esa es la única forma en que podrá examinar todos los píxeles en una pantalla de proporción de píxeles estándar.

Esto funciona bien en Windows 7 con Firefox 21.0 y también en Mac OS X con Firefox 27.0.1.

Si no está utilizando consultas de medios y otra lógica más avanzada (es decir, está alimentando a todos con las imágenes HiDPI), puede hacer zoom con su navegador al 200%. La emulación de Chrome es una herramienta útil y activa consultas de medios, pero debido a que evita el zoom, no puede examinar la calidad de la imagen.

Zoom en Firefox y Edge

Actualmente en Firefox y Edge, si hace zoom, se activan consultas de medios basadas en dppx. Por lo tanto, este enfoque más sencillo puede ser suficiente, pero tenga en cuenta que la funcionalidad se informa como un error "no solucionará" para Firefox, por lo que esto podría cambiar.

En la versión de Google Chrome "33.0.1720.0 Canary", ahora puede emular dispositivos como iPhone5 y otros con un gran conjunto de parámetros como "Relación de píxeles del dispositivo", "métricas de fuentes de Android" y "Emulación de viewport" .

Ya no es necesario ese truco de Firefox, es difícil trabajar con él, de todos modos.

Gracias al equipo de desarrollo de Google. ! :)

En Chrome puedes hacerlo mediante:

1) Abra Chrome Developer Tools y haga clic en el pequeño icono de "engranaje".

2) Luego elija "Mostrar vista 'Emulación' en el cajón de la consola".

3) Finalmente, abra el "cajón de la consola" en Herramientas de desarrollo y elija Emulación . Configure Emular pantalla y configure la relación de píxeles del dispositivo en 2.5.

Hasta donde yo sé, no es posible más que comprar un dispositivo de retina.

Algunas soluciones

• Sugerido aquí:

  • Si duplicó el tamaño de la imagen y las proporciones siguen siendo las mismas, está bastante seguro. Si no tiene una pantalla de retina para probar, cambie de la consulta de medios de proporción de píxeles a algo basado en el ancho.

  • Prueba y solución de problemas de contenido de alta resolución
    http://developer.apple.com/library/mac/#documentation/GraphicsAnimation/Conceptual/HighResolutionOSX/Testing/Testing.html

• Cómo desarrollar para HiDPI (“Retina”) sin Retina MacBook Pro
  http://make.wordpress.org/ui/2012/08/01/dev-for-hidpi-without-retina-mbp/

• Imágenes de WordPress Retina
  http://wpmu.org/wordpress-retina/

Menos relevante

• Cómo crear un sitio web receptivo y listo para Retina

• Cómo diseñar para pantallas Retina de Apple
  http://www.studiopress.com/design/retina-display-design.htm

• Creación de sitios web para pantallas Retina: amistad con píxeles
  http://www.slideshare.net/shoshizilla/building-websites-for-retina-displays-making-friends-with-pixels

• ¿Cómo desarrollar un sitio web para la visualización de retina?

• ¿Cómo prepararse para la retina?

Método actual para emular una pantalla Retina (HiDPI) con Google Chrome

1) " Haga clic derecho " en la página web y luego seleccione " Inspeccionar " para abrir las herramientas de desarrollo de Chrome

2) Haga clic en el icono " Alternar modo de dispositivo "

3) En el cuadro desplegable Dispositivo en la parte superior de la pantalla, seleccione " Laptop con pantalla HiDPI "

4) Ahora puede ver cómo se verá el sitio web en una pantalla Retina también conocida como HiDPI

Utilizo una biblioteca de cambio de tamaño de imágenes para crear imágenes dinámicamente. Para la versión 2x, agrego una marca de agua dinámica durante la depuración; esto hace que sea muy fácil ver si la imagen de alta resolución se muestra realmente o no. Lo he encontrado muy útil.

La forma en que esto funciona variará, por lo que no se incluye código de muestra.

Versión 80 de Google Chrome

1. Abra las herramientas de desarrollo ctrl-shift j
2. Para alternar la barra de herramientas del dispositivo, haga clic en el icono de tableta / teléfono en la parte superior izquierda (se volverá azul si hace clic en él)

3. Ahora la ventana gráfica debería tener una barra de herramientas encima. Haga clic en el icono de opciones (3 puntos) en la parte superior derecha y seleccione la opción Agregar proporción de píxeles del dispositivo .

4. Ahora debería ver la opción en la barra de herramientas. Desde aquí puede cambiar a 1x, 2x o 3x.

5. Cuando esté probando, asegúrese de presionar el botón de actualización cada vez que cambie la proporción de píxeles. Si establece la proporción en 2x y luego la vuelve a establecer en un valor más bajo, no verá ningún cambio porque el navegador no obtendrá activos 1x si ya ha obtenido 2x o más.

No sé si esto es demasiado simple, presiono ctrl y me desplazo y se activa la consulta de medios. Lo he comprobado en bugzilla y funciona. No estoy seguro de la escala de svg, ya que parece borrosa, pero es la imagen de svg.

Si tiene una máquina virtual mac (o mac osx), puede usar el emulador de ios con xcode. Hace volar la ventana dos veces más grande, por lo que no es como aparece en la vida real, pero le mostrará claramente si sus imágenes están borrosas o no.