css - mac - inspeccionar pagina web

¿Cómo simular la relación de píxeles para probar consultas de medios con Google Chrome o Firefox en Windows?

Question

Si bien es fácil probar diferentes resoluciones de pantalla en Google Chrome, me pregunto cómo los desarrolladores podrían probar las diferentes proporciones de píxeles de dispositivos subyacentes a las siguientes consultas de medios de CSS.

/* Pixel ratio of 1. Background size is 100% (of a 100px image) */
#header { background: url(header.png); }
/* Pixel ratio of 1.5. Background-size is 1/1.5 = 66.67% (of a 150px image) */
@media only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {
#header { background: url(headerRatio1_5.png); background-size: 66.67%; }
}
/* Pixel ratio of 2. Background-size is 1/2 = 50% (of a 200px image) */
@media only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
#header { background: url(headerRatio2.png); background-size: 50%; }
}

¿Existe alguna forma o una extensión de navegador para imitar la proporción de píxeles del dispositivo?

Answer 1

Solo puede probar la consulta de medios correspondiente a la proporción de píxeles del dispositivo en su dispositivo específico, está mirando su navegador mientras prueba.
La proporción de píxeles del dispositivo es un número incambiable específico del dispositivo porque tiene en cuenta los píxeles físicos disponibles de los dispositivos. Ver la investigación de ppk en devicePixelRatio

Por lo tanto, básicamente no es posible imitar una proporción de píxel de dispositivo diferente a la del dispositivo. Aún así, puede probar su código de humo simplemente aplicando una regla de consulta de medios diferente.

Tenga cuidado con la relación min-device-pixel-ratio: 1.5 ya que los dispositivos HDPi más nuevos, como Nexus 7, tienen una relación de píxel de 1.3 dispositivos .

Answer 2

Volker E. tiene razón en que las consultas de los medios de relación de píxeles no se activarán.

Sin embargo, es posible al menos obtener una vista previa de la apariencia visual (leer: escala) de las consultas de medios para dispositivos que son 1.5x, 2x, etc.

Solo especifique la resolución que desee en Chrome Dev Tools y asegúrese de que esté seleccionada la opción "Ajustar en ventana". Luego, cambie el tamaño de la ventana de su navegador de manera apropiada.

Ejemplo: para emular un Galaxy Nexus en modo horizontal, solo ingrese 720x1280 como las dimensiones, y luego cambie el tamaño de la ventana de su buscador para que sea de 640 px de ancho. Voila! Ahora ha emulado la proporción de píxeles 2x del dispositivo.

(ancho del dispositivo [en píxeles]) ÷ (proporción de píxeles del dispositivo) = el tamaño de su ventana debe ser

Answer 3

derrylwc tiene una buena sugerencia pero no incluye instrucciones:

• Abra las herramientas de desarrollador (ctrl-shift-i o command-alt-i)
• Haga clic en el engranaje en la esquina inferior derecha para la configuración
• Elija la pestaña "Anulaciones" (en el lado izquierdo)
• Haga clic en "Habilitar" y "Habilitar en el inicio de DevTools"
• Marque "Medidas del dispositivo" y personalice. El "factor de escala de la fuente" parece ser la relación de píxel del dispositivo.

Answer 4

Las DevTools de Chrome tienen una función llamada "Modo de dispositivo y emulación móvil" disponible en Chrome 32 y versiones posteriores. Se describe en detalle here . Aquí hay un video tutorial del canal DevBytes YouTube de Google.

Abra DevTools presionando F12 (o Shift + Ctrl + I / Cmd + Opt + I en Mac). En las versiones actuales de Chrome, haga clic en el ícono de "teléfono inteligente" en la esquina superior izquierda de la ventana de DevTools para activar la Emulación móvil. Puede cambiar la mayoría de las configuraciones (tipo de dispositivo, resolución, proporción de píxeles, agente de usuario ...) en la barra de herramientas en la pantalla de emulación. Para ver más opciones, haga clic en "..." en el lado derecho de la barra de herramientas.

En versiones anteriores de Chrome, es posible que deba habilitar la característica antes de poder usarla: en DevTools, haga clic en el ícono de Configuración (rueda dentada), luego haga clic en "Anular" y seleccione "Mostrar" Emulación "en el cajón de la consola" . A continuación, haz clic en el ícono "> =" a la izquierda del ícono de Configuración para mostrar el "cajón de la consola" y deberías ver una pestaña "Emulación" , donde puedes habilitar la emulación y cambiar la configuración.

Answer 5

about: config hack en Firefox

En realidad puedes usar Firefox:

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

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.

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.