La propiedad devicePixelRatio devuelve la relación entre la resolución en píxeles físicos y la resolución en píxeles CSS del dispositivo actual. En términos más simples, esta propiedad también le dice al navegador cuántos de los píxeles reales de la pantalla se deben usar para dibujar un solo píxel CSS. Esta es una propiedad de solo lectura.
Sintaxis:
value = window.devicePixelRatio;
Valor devuelto: devuelve un valor de punto flotante de doble precisión que indica la relación entre la resolución de la pantalla en píxeles físicos y la resolución en píxeles CSS.
Ejemplo: En este ejemplo, obtendremos la relación usando esta propiedad.
html
<!DOCTYPE HTML>
<html>
<head>
<title>window devicePixelRatio property</title>
</head>
<body style="text-align:center;">
<h1 style="color:green;">
GeeksforGeeks
</h1>
<p>
HTML | window devicePixelRatio property
</p>
<button onclick = "Geeks()">
Click Here
</button>
<p id="a">
</p>
<script>
var a = document.getElementById("a");
function Geeks() {
a.innerHTML="devicePixelRatio is :
"+window.devicePixelRatio;
}
</script>
</body>
</html>
Producción:
Antes de hacer clic en el botón:
Después de hacer clic en el botón: en el dispositivo de zoom estándar, PixelRatio resulta ser 1.25
Navegadores compatibles:
- Google Chrome 1 y superior
- Borde 12 y superior
- Firefox 18 y superior
- Safari 3 y superior
- Ópera 11.1 y superior
- Internet Explorer 11 y superior