webpage - para - ¿Cómo probar una página web destinada a Retina display?

tienda mabisy

Question

He codificado una página web destinada a la visualización de la retina. Actualmente no tengo un monitor de retina.

¿Hay alguna aplicación de simulador o herramienta para probar las páginas web para visualizar la retina?

¿O hay monitores (no MacBook o iPad de Apple) que son similares a la pantalla retina de Apple?

Gracias por adelantado.

Answer 1

Hay un JavaScript Web Retina Emulator en GitHub.

También puede usar Opera Mobile Emulator para probar resoluciones personalizadas. Hay una explicación de cómo hacerlo aquí .

Si tiene una computadora Apple más antigua (sin una pantalla Retina), puede simular pantallas Retina con Quartz Debug, una herramienta dentro de XCode. También en XCode puede probar dispositivos iOS con pantallas retina usando el simulador de iOS.

Answer 2

Puede verificar con el navegador Chrome para probar si la pantalla retina funciona o no, use esta guía

1. Abre el Chrome Browser y right click y luego inspect element clic en inspect element
2. En la barra inferior encontrará algunas pestañas que la console, search, emulation and rendering
3. Haga clic en la emulation pestañas, luego levante la pestaña de la barra como se muestra a continuación
4. Ajústelo de acuerdo con el menú de la left , ajuste el dispositivo, la pantalla, etc.

Por favor, consulte este artículo para la guía de detalles: http://www.gee.web.id/2014/09/how-test-retina-display-on-chrome.html

Answer 3

Puedes agregar este css. Todo se verá 2 veces más grande, pero hace que sea fácil detectar si hay algún problema. El JavaScript Web Retina Emulator no funcionó para mí (borrosa en Safari)

body {
  zoom: 200%;
  -moz-transform: scale(2);
  -moz-transform-origin: 0 0;
}

El zoom: 200% se aplica a webkit, -moz para Firefox, por lo que Safari / Chrome / Firefox funcionará, no estoy seguro acerca de IE.

Si aplica -webkit-transform: scale (2), las cosas se verán borrosas, por lo que deberá usar el zoom: 200%;

Answer 4

about: config hack en Firefox

En realidad puedes usar Firefox:

1. Ir a about:config
2. Encuentra layout.css.devPixelsPerPx
3. Cámbielo a la proporción deseada (1 para normal, 2 para retina, etc.)

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!

Esto fue hecho en Windows 7 con Firefox 21.0.

La ventaja de esta solución es que activará consultas de medios y otra lógica avanzada. Si no estás haciendo eso, y solo estás alimentando a todos las imágenes HiDPI, puedes ampliar con Chrome, etc. (o escribir CSS para hacer zoom por ti, si eso hace flotar tu barco).

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.

Answer 5

body {
  zoom: 200%;
  -moz-transform: scale(2);
  -moz-transform-origin: 0 0;
}

Ese código solo no hará el truco. Si está utilizando consultas de medios, debe cambiar la proporción de píxeles a 1, en lugar de 1.5 o 2, para hacer el truco. De lo contrario, no cambiará las imágenes a las contrapartes de mayor resolución.