initial commit

1 files changed, 179 insertions, 0 deletions

diff --git a/files/zh-cn/web/api/window/devicepixelratio/index.html b/files/zh-cn/web/api/window/devicepixelratio/index.html
new file mode 100644
index 0000000000..a5976667d9
--- /dev/null
+++ b/files/zh-cn/web/api/window/devicepixelratio/index.html
@@ -0,0 +1,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="在_&lt;canvas>_中更正分辨率">在 <code>&lt;canvas&gt;</code> 中更正分辨率</h3>
+
+<p>{{htmlelement("canvas")}}可能在视网膜屏幕上显得太模糊。 使用<code>window.devicePixelRatio</code>确定应添加多少额外的像素密度以使图像更清晰。</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre>&lt;canvas id="canvas"&gt;&lt;/canvas&gt;</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 = () =&gt; {
+  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>&lt;div class="container"&gt;
+  &lt;div class="inner-container"&gt;
+    &lt;p&gt;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 &lt;code&gt;Window.devicePixelRatio&lt;/code&gt;.
+       Try it and watch what happens!&lt;/p&gt;
+  &lt;/div&gt;
+    &lt;div class="pixel-ratio"&gt;&lt;/div&gt;
+&lt;/div&gt;</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="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries">Media queries</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries">Using media queries</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/@media/resolution">CSS <code>resolution</code> media query</a></li>
+ <li></li>
+</ul>