window屬性:devicePixelRatio

2018-04-03 10:54 更新

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);

window屬性:devicePixelRatio

規(guī)范

規(guī)范狀態(tài)注釋
CSS對(duì)象模型(CSSOM)視圖模塊
該規(guī)范中'Window.devicePixelRatio'的定義。
Working Draft
初始定義

瀏覽器兼容性

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

  • 電腦端
特征Chrome
Edge
Firefox(Gecko)
Internet Explorer
Opera
Safari
基本支持支持支持支持:49支持:11支持:41支持:9.1 
  • 移動(dòng)端

特征Android WebviewChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
基本支持支持支持支持??支持支持:9.3
以上內(nèi)容是否對(duì)您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)