html - resolucion - ¿Cómo probar un sitio web para Retina en Windows sin una pantalla Retina real?
pantalla retina vs 4k (8)
En Chrome puedes hacerlo por:
1) Abre Chrome Developer Tools y haz clic en el pequeño icono de "engranaje".
2) Luego elija la opción "Mostrar ''Emulación'' en el cajón de la consola."
3) Finalmente, abra el "cajón de la consola" en Herramientas del desarrollador y elija Emulación . Establezca la pantalla Emular y configure la Proporción de píxeles del dispositivo en 2.5.
¿Hay alguna manera 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 "1920x1080. Anoche revisé mi sitio web con una nueva Retina MacBook Pro de 15" y los gráficos parecí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
Utilicé el enfoque retina.js ya que no tengo imágenes de fondo.
¿Hay alguna manera 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, al menos, probar sitios web para la compatibilidad Retina en mi propio entorno.
En Google Chrome versión "33.0.1720.0 Canary", ahora puede emular dispositivos como iPhone5 y otros con un gran conjunto de parámetros como "Proporción de píxeles del dispositivo", "métricas de fuente de Android" y "Emulación de la ventana gráfica" .
No hay necesidad de que Firefox piratee más, de todos modos, es difícil trabajar con él.
Gracias equipo de desarrollo de Google! ! :)
No sé si esto es demasiado simple, presiono ctrl y scroll y desencadena la consulta de medios. Lo he comprobado en bugzilla y funciona. No estoy seguro de la escalada svg, ya que parece borrosa, pero es la imagen svg.
Por lo que puedo decir, no es posible más que comprar un dispositivo de retina.
Algunas soluciones
Si duplicó los tamaños de imagen y las proporciones siguen siendo las mismas, está más o menos seguro. Si no tiene una pantalla de retina para probar, cambie de la consulta de medios de relación de píxeles a algo basado en el ancho.
Pruebas 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 una 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 diseñar para pantallas Retina de Apple
http://www.studiopress.com/design/retina-display-design.htmCreación de sitios web para pantallas Retina: Hacer amigos 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 la retina?
Si tiene una máquina virtual mac (o mac osx), puede usar el emulador ios con xcode. hace explotar la ventana el doble de grande, por lo que no es como aparece en la vida real, pero le mostrará claramente si sus imágenes son borrosas o no.
Utilizo una biblioteca de cambio de tamaño de imagen 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 está mostrando o no. Lo he encontrado muy útil.
La forma en que esto funciona variará, por lo que no se incluirá el código de muestra.
Método actual para emular una pantalla Retina (HiDPI) con Google Chrome
1) " Haga clic derecho " en la página web, luego seleccione " Inspeccionar " para abrir Herramientas de desarrollo de Chrome
2) Haga clic en el icono " Alternar modo de dispositivo "
3) En el cuadro desplegable del dispositivo en la parte superior de la pantalla, selecciona " Laptop con pantalla HiDPI "
4) Ahora puede ver cómo se verá el sitio web en una pantalla Retina aka HiDPI
about: config hack en Firefox
En realidad puedes usar Firefox:
- Vaya a "about: config"
- Encuentra "layout.css.devPixelsPerPx"
- Cámbielo a la proporción deseada (1 para normal, 2 para retina, etc. -1 parece ser Predeterminado).
Captura de pantalla:
Actualice su página: ¡auge, su consulta de medios ya ha comenzado! ¡Felicitaciones a Firefox por ser increíble para el desarrollo web! Encabeza, no solo se aumentará el doble del tamaño del sitio web, también se duplicará la UI de Firefox. Esta duplicación o acercamiento es necesario, ya que esa es la única forma en que podrá examinar todos los píxeles en una pantalla de relació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 las imágenes HiDPI), puede ampliar su navegador con un 200%. La emulación de Chrome es una herramienta útil, así como activa consultas de medios, pero debido a que evita el acercamiento, no puede examinar la calidad de la imagen.
Zoom en Firefox y Edge
Actualmente, en Firefox y Edge, si aplica un zoom, desencadena 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 bug "no se soluciona" para Firefox, por lo que esto podría cambiar.