window屬性：devicePixelRatio

devicePixelRatio屬性

該 Window 屬性 devicePixelRatio 能夠返回當(dāng)前顯示設(shè)備的物理像素分辨率與 CSS 像素分辨率的比率。此值也可以解釋為像素大小的比率：一個(gè) CSS 像素的大小與一個(gè)物理像素的大小的比值。簡(jiǎn)單地說，這告訴瀏覽器應(yīng)該使用多少個(gè)屏幕的實(shí)際像素來繪制單個(gè) CSS 像素。

這在處理標(biāo)準(zhǔn)顯示與 HiDPI 或 Retina 顯示之間的差異時(shí)很有用，它使用更多屏幕像素繪制相同對(duì)象，從而產(chǎn)生更清晰的圖像。

當(dāng)此值發(fā)生變化時(shí)（例如，如果用戶將 window 拖到具有不同像素密度的顯示器上），則無法通知該值。由于沒有可用于檢測(cè)像素密度變化的回調(diào)或事件，因此唯一的方法是定期檢查其 devicePixelRatio 值是否已更改。不要經(jīng)常這樣做，否則會(huì)影響性能。

devicePixelRatio屬性語法

value = window.devicePixelRatio;

devicePixelRatio屬性值

devicePixelRatio 屬性值為一個(gè) double。

devicePixelRatio屬性示例

一個(gè) canvas 在視網(wǎng)膜屏幕上可能顯得太模糊。使用  window.devicePixelRatio 以確定應(yīng)該添加多少額外的像素密度以允許更清晰的圖像。

HTML

<canvas id="canvas"></canvas>

JavaScript

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

// Set display size (css pixels).
var size = 200;
canvas.style.width = size + "px";
canvas.style.height = size + "px";

// Set actual size in memory (scaled to account for extra pixel density).
var scale = window.devicePixelRatio; // <--- Change to 1 on retina screens to see blurry canvas.
canvas.width = size * scale;
canvas.height = size * scale;

// Normalize coordinate system to use css pixels.
ctx.scale(scale, scale);

ctx.fillStyle = "#bada55";
ctx.fillRect(10, 10, 300, 300);
ctx.fillStyle = "#ffffff";
ctx.font = '18px Arial';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';

var x = size / 2;
var y = size / 2;

var textString = "I love MDN";
ctx.fillText(textString, x, y);

規(guī)范

瀏覽器兼容性

我們正在將兼容性數(shù)據(jù)轉(zhuǎn)換為機(jī)器可讀的JSON格式。

• 電腦端

• 移動(dòng)端