javascript - manipular - ¿Cómo se puede obtener la proporción de píxel de píxeles/dispositivos de CSS?

javascript mostrar imagen

Question

Quiero encontrar la relación entre los píxeles CSS y los píxeles del dispositivo.

Editar : Debería haberme dado cuenta de que esto es solo un nivel de zoom. He agregado una respuesta a la referencia canónica sobre los niveles de zoom.

Los píxeles CSS son la unidad que utilizamos para casi todo: es lo que significan element.style.width, element.clientWidth, element.offsetWidth, etc. Los píxeles del dispositivo son los píxeles que el navegador realmente pinta. Algunas propiedades se miden en los píxeles del dispositivo, por ejemplo, window.screen.width, que es el tamaño de la pantalla (por ejemplo, 1024) que no cambia cuando el usuario acerca el zoom.

Motivación: cuando el usuario amplía, quiero aumentar el ancho y alto de un lienzo (manteniendo style.width y style.height con el mismo valor de píxeles CSS), escalar () el contexto y volver a dibujar en un lienzo mejorado de mayúsculas y minúsculas.

He leído A Tale of Two Viewports de Quirksmode y High DPI en Surfin ''Safari , pero ninguno de ellos dice cómo obtener la proporción. Las únicas ideas que tengo hasta ahora son recoger mousemoves y medir el cambio en event.clientX dividido por cambio en event.screenX, o para programar las consultas de medios utilizando moz--min-device-pixel-ratio , use getComputedStyle() para probar si la regla coincide, y acotarla con una búsqueda binaria. Espero que haya una manera más fácil / más confiable.

Editar : He intentado utilizar las consultas @media (-webkit-min-device-pixel-ratio:1) con Chrome, Safari y Firefox 4, y aparentemente Webkit trata la propiedad como una proporción constante de píxel a píxel de dispositivo ( que no cambia con el zoom), mientras que Firefox 4 lo trata como un píxel de dispositivo a una proporción de píxeles CSS (que aumenta cuando se acerca). Por lo tanto, en Firefox 4, puedo descubrir la proporción de píxel de píxeles / dispositivos de CSS utilizando una búsqueda binaria, pero no con Webkit.

Answer 1

Hay una solución CSS / JS mucho mejor:

/** sample media query for pixel-ratio=2" **/
@media  
(-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) { 
  .pixel-ratio-holder:before {
   content: "2";
  }
}


function jsPixelRatio(){
   return window.getComputedStyle(document.querySelector(''.pixel-ratio-holder''), ''before'').getPropertyValue(''content'').replace(/[^a-z]/g,'''') * 1;
}

Answer 2

Puede usar window.devicePixelRatio en los navegadores basados ​​en Webkit para obtener la proporción de píxeles del dispositivo directamente en JavaScript. Lo he usado en Google Chrome, navegadores Android (2.2+) y Mobile Safari. Aunque no tengo idea sobre otros navegadores.

Answer 3

Siempre puedes utilizar el siguiente método y funcionaría en todos los navegadores

window.getDevicePixelRatio = function () {
    var ratio = 1;
    // To account for zoom, change to use deviceXDPI instead of systemXDPI
    if (window.screen.systemXDPI !== undefined && window.screen.logicalXDPI       !== undefined && window.screen.systemXDPI > window.screen.logicalXDPI) {
        // Only allow for values > 1
        ratio = window.screen.systemXDPI / window.screen.logicalXDPI;
    }
    else if (window.devicePixelRatio !== undefined) {
        ratio = window.devicePixelRatio;
    }
    return ratio;
};