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

85

¿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.

Alexander Rechsteiner
fuente
2
Podría ser útil: stackoverflow.com/questions/12243549/…
JSuar
@Jsuar: Desafortunadamente no lo es. La biblioteca de JavaScript no parece funcionar con retina.js y Opera parece ser para dispositivos móviles.
Alexander Rechsteiner
2
Intente hacer todas las imágenes, como su logotipo, en SVG en lugar de png o jpg.
Seph

Respuestas:

152

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.

andrewb
fuente
2
Alguien sabe, ¿hay algo similar para Chrome?
Krzysztof Romanowski
@castus No lo creo, lo mejor que tienes es acercarte y no creo que eso se active en las consultas de medios.
andrewb
@andrewb: Me estaba preguntando lo mismo que impulsó mi reputación (¡hurra!). Tal vez se indexó en Google para un término de búsqueda frecuente.
Alexander Rechsteiner
@AlexanderRechsteiner En realidad, lo vinculó la página de Facebook de Smashing Magazine y fue compartido en Facebook por bastantes personas. ¡Gracias por aceptar mi respuesta!
Andrewb
@ChristinaArasmoBeymer Sí, se puede
andrewb
25

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. ! :)

Urb Gim Tam
fuente
1
No miré MediaQueries, pero en términos de solo revisar la calidad de la imagen, no veo cómo esto es útil. Necesita aumentar los píxeles X2; de lo contrario, no podrá ver visualmente qué contenido está listo para Retina y cuál no. Hice una prueba rápida y Chrome hizo que el sitio web google.com pareciera pequeño, pero al pasar a Firefox, descubrí que el Doodle de Google en ese momento no era la densidad de píxeles de Retina. Pero bueno, si esto funciona para la gente, ¡significa saltarse la gran IU con la configuración de Firefox!
andrewb
Sí, el punto aquí no es aumentar la calidad de la imagen (es imposible, ya que la pantalla física permanece con la misma densidad de píxeles), sino estar seguro, como desarrollador sin una Mac Retina, que todavía estás cubriendo todas las bases.
Urb Gim Tam
Si solo desea revisar la calidad de la imagen, no necesita hacer nada más que acercar su navegador al 200%. Si desea ejecutar consultas de medios en Chrome, debe hacer ambas cosas: hacer zoom y emular.
Michael McGinnis
@MichaelMcGinnis No puedo emular y hacer zoom con Chrome, ¿has podido?
andrewb
Sí @andrewb, parece que deben ser pruebas separadas. Cuando hago zoom y luego emulo, las imágenes se vuelven pequeñas nuevamente. Hacer zoom mientras se emula no afecta el tamaño de la imagen.
Michael McGinnis
14

En Chrome puedes hacerlo mediante:

1) Abra Chrome Developer Tools y haga clic en el pequeño icono de "engranaje". ingrese la descripción de la imagen aquí


2) Luego elija "Mostrar vista 'Emulación' en el cajón de la consola". ingrese la descripción de la imagen aquí


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.

ingrese la descripción de la imagen aquí

thegreyspot
fuente
Gracias. Es algo similar en Chrome actual. ¿Es 2.5el número mágico único para todas las pantallas Retina? ¿O aumentó / disminuyó desde 2014? Editar: Ah, está aquí
Crusy
10

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

Algunas soluciones

Menos relevante

JSuar
fuente
Gracias, el punto de developer.apple.com me llevó por el camino correcto. Al igual que esta otra respuesta aquí en Stack Overflow.
Alex Kendrick
7

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 "

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 "

Seleccione una computadora portátil con pantalla HiDPI

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

user280109
fuente
1

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.

Simon_Weaver
fuente
1

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)

ingrese la descripción de la imagen aquí

  1. 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 .

ingrese la descripción de la imagen aquí

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

ingrese la descripción de la imagen aquí

  1. 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.
Isaac Pak
fuente
-1

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.

Dale Wemyss
fuente
¿Qué navegador o hardware estás usando? ¿Te refieres a Mozilla en lugar de Bugzilla?
Michael McGinnis
-3

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.

filtah
fuente
Sí, y puede ejecutar os x como una máquina virtual en Windows
filtah
@filtah realmente no es la peor sugerencia
Paul