1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
|
---
title: Window.devicePixelRatio
slug: Web/API/Window/devicePixelRatio
translation_of: Web/API/Window/devicePixelRatio
---
<p>{{APIRef}}</p>
<p>{{domxref("Window")}} 接口的<code><strong>devicePixelRatio</strong></code>返回当前显示设备的<em>物理像素</em>分辨率与<em>CSS像素</em>分辨率之比。 此值也可以解释为像素大小的比率：一个CSS像素的大小与一个物理像素的大小。 简单来说，它告诉浏览器应使用多少屏幕实际像素来绘制单个CSS像素。</p>
<p>当处理标准显示器与HiDPI或Retina显示器之间的差异时，这很有用，后者使用更多的屏幕像素绘制相同的对象，从而获得更清晰的图像。</p>
<p>您可以使用{{domxref("Window.matchMedia", "window.matchMedia()")}} 检查<code>devicePixelRatio</code>的值是否发生更改（例如，如果用户将窗口拖动到带有 不同的像素密度）。 请参阅{{anch("Monitoring screen resolution or zoom level changes", "下面的例子")}}.。</p>
<h2 id="Summary" name="Summary">语法</h2>
<pre class="syntaxbox"><em><var>value</var></em> = window.devicePixelRatio;
</pre>
<h3 id="值Value">值Value</h3>
<p>一个双精度浮点值，指示显示器的物理像素分辨率与CSS像素分辨率之比。 值1表示经典96 DPI（在某些平台上为76 DPI）显示，而对于HiDPI / Retina显示屏则期望值为2。 在异常低分辨率的显示器中，或更常见的是，当屏幕的像素深度比简单地将96或76 DPI的标准分辨率提高一倍时，可能还会返回其他值。</p>
<h2 id="例子">例子</h2>
<h3 id="在_<canvas>_中更正分辨率">在 <code><canvas></code> 中更正分辨率</h3>
<p>{{htmlelement("canvas")}}可能在视网膜屏幕上显得太模糊。 使用<code>window.devicePixelRatio</code>确定应添加多少额外的像素密度以使图像更清晰。</p>
<h4 id="HTML">HTML</h4>
<pre><canvas id="canvas"></canvas></pre>
<h4 id="JavaScript">JavaScript</h4>
<pre>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 = Math.floor(size * scale);
canvas.height = Math.floor(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);</pre>
<h2 id="sect1"><img alt="This image describe the impact of different value on retina display. " src="https://mdn.mozillademos.org/files/15023/devicePixelRation%20Diff..png"></h2>
<h3 id="监视屏幕分辨率或缩放级别的更改">监视屏幕分辨率或缩放级别的更改</h3>
<p>在此示例中，我们将设置一个媒体查询并观看它以查看设备分辨率何时更改，以便我们可以检查<code>devicePixelRatio</code>的值来处理所需的任何更新。</p>
<h4 id="JavaScript_2">JavaScript</h4>
<p>JavaScript代码创建媒体查询，以监控设备分辨率并在每次更改时检查<code>devicePixelRatio</code>的值。</p>
<pre>let pixelRatioBox = document.querySelector(".pixel-ratio");
let mqString = `(resolution: ${window.devicePixelRatio}dppx)`;
const updatePixelRatio = () => {
let pr = window.devicePixelRatio;
let prString = (pr * 100).toFixed(0);
pixelRatioBox.innerText = `${prString}% (${pr.toFixed(2)})`;
}
updatePixelRatio();
matchMedia(mqString).addListener(updatePixelRatio);
</pre>
<p>字符串<code>mqString</code>设置为媒体查询本身。 媒体查询以<code>(resolution: 1dppx)</code>（对于标准显示）或<code>(resolution: 2dppx)</code>（对于Retina / HiDPI显示）开始，检查当前显示分辨率是否与每个像素<code>px</code>的实际设备像素点匹配。</p>
<p><code>updatePixelRatio()</code>函数获取<code>devicePixelRatio</code>的当前值，然后将<code>pixelRatioBox</code>的 {{domxref("HTMLElement.innerText", "innerText")}}设置为一个字符串，该字符串同时显示百分比和原始十进制值比率，最多两位小数。</p>
<p>然后，调用<code>updatePixelRatio()</code>函数一次以显示起始值，然后使用{{domxref("Window.matchMedia", "matchMedia()")}} 和 {{domxref("EventTarget.addEventListener", "addEventListener()")}}来将<code>updatePixelRatio()</code>设置为<code>change</code>事件的处理程序。</p>
<h4 id="HTML_2">HTML</h4>
<p>HTML将创建包含说明的框和将显示当前像素比率信息的<code>pixel-ratio</code> 框。</p>
<pre><div class="container">
<div class="inner-container">
<p>This example demonstrates the effect of zooming the page in
and out (or moving it to a screen with a different scaling
factor) on the value of the property <code>Window.devicePixelRatio</code>.
Try it and watch what happens!</p>
</div>
<div class="pixel-ratio"></div>
</div></pre>
<details><summary>
<h4 id="CSS">CSS</h4>
</summary>
<pre>body {
font: 22px arial, sans-serif;
}
.container {
top: 2em;
width: 22em;
height: 14em;
border: 2px solid #22d;
margin: 0 auto;
padding: 0;
background-color: #a9f;
}
.inner-container {
padding: 1em 2em;
text-align: justify;
text-justify: auto;
}
.pixel-ratio {
position: relative;
margin: auto;
height: 1.2em;
text-align: right;
bottom: 0;
right: 1em;
font-weight: bold;
}</pre>
</details>
<h4 id="Result">Result</h4>
<p>{{EmbedLiveSample("Monitoring_screen_resolution_or_zoom_level_changes", "100%", 500)}}</p>
<h2 id="规范">规范</h2>
<table>
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName("CSSOM View", "#dom-window-devicepixelratio", "Window.devicePixelRatio")}}</td>
<td>{{Spec2("CSSOM View")}}</td>
<td>Initial definition</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">浏览器兼容性</h2>
<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
<p>{{Compat("api.Window.devicePixelRatio")}}</p>
<h2 id="参见">参见</h2>
<ul>
<li><a href="/zh-CN/docs/Web/CSS/Media_Queries">Media queries</a></li>
<li><a href="/zh-CN/docs/Web/CSS/Media_Queries/Using_media_queries">Using media queries</a></li>
<li><a href="/zh-CN/docs/Web/CSS/@media/resolution">CSS <code>resolution</code> media query</a></li>
<li></li>
</ul>
|
