path: root/files/ja/web/api/window/devicepixelratio/index.html

---
title: Window.devicePixelRatio
slug: Web/API/Window/devicePixelRatio
tags:
  - API
  - Adaptive Design
  - Property
  - Read-only
  - Reference
  - Window
  - devicePixelRatio
  - pixel
  - ratio
  - resolution
translation_of: Web/API/Window/devicePixelRatio
---
<p>{{APIRef}}</p>

<p><span class="seoSummary">{{domxref("Window")}}プロパティの<code><strong>devicePixelRatio</strong></code>は現在のディスプレイにおけるCSS解像度と物理解像度の比を返します。</span> これは物理1ピクセルの大きさに対するCSS1ピクセルの大きさの比率と考えることもできます。もっと簡単に言うと、CSS上の1pxが物理ピクセルいくつで表示されているかという値です。</p>

<p>これは一般的なディスプレイと、HiDPI(高DPI)やRetinaのように同じ大きさのオブジェクトを描画するのにより多くのピクセルを使って鮮明さを得ているディスプレイとの差異を扱うのに便利です。</p>

<p>{{domxref("Window.matchMedia", "window.matchMedia()")}} を使うと、<code>devicePixelRatio</code> の値の変化（例えば、ユーザーが異なるピクセル解像度の画面へウィンドウをドラッグした時など）を検知することができます。{{anch("Monitoring screen resolution or zoom level changes", "後述の例")}}を参照して下さい。</p>

<h2 id="Syntax" name="Syntax">構文</h2>

<pre class="syntaxbox"><em><var>value</var></em> = window.devicePixelRatio;
</pre>

<h3 id="Value" name="Value">値</h3>

<p>倍精度浮動小数点の値であり、CSS ピクセル解像度に対するディスプレイの物理的なピクセル解像度の比率を表します。この値が 1 であることは、それが伝統的な 96 DPI (プラットフォームによっては 76 DPI) であることを意味し、2 であることは、HiDPI やレティナのディスプレイであると考えられます。それ以外の値が返されることもあり、それは一般的でない低解像度のディスプレイの場合や、より考えられるのはスクリーンが標準的な 96 または 76 DPI の解像度の単純な 2 倍よりも高いピクセル密度を持つ場合です。</p>

<h2 id="Examples" name="Examples">使用例</h2>

<h3 id="Correcting_resolution_in_a_&lt;canvas>" name="Correcting_resolution_in_a_&lt;canvas>">&lt;canvas&gt; の解像度を補正する</h3>

<p>レティナでは <code>canvas</code> がぼやけて見えることがあるでしょう。<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><code>var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
</code>
// 表示サイズを設定(CSSにおけるピクセル数です)。
var size = 200;
canvas.style.width = size + "px";
canvas.style.height = size + "px";

// メモリ上における実際のサイズを設定(ピクセル密度の分だけ倍増させます)。
var scale = window.devicePixelRatio; // レティナでこの値を1にするとぼやけたcanvasになります
canvas.width = size * scale;
canvas.height = size * scale;

// CSS上のピクセル数を前提としているシステムに合わせます。
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>

<p><a href="https://mdn.mozillademos.org/files/15023/devicePixelRation%20Diff..png"><img alt="この画像は、レティナディスプレイにおける異なる値の影響を表すものです。" src="https://mdn.mozillademos.org/files/15023/devicePixelRation%20Diff..png" style="height: 57px; width: 600px;"></a></p>

<h3 id="Monitoring_screen_resolution_or_zoom_level_changes" name="Monitoring_screen_resolution_or_zoom_level_changes">画面解像度やズームレベルの変化を監視する</h3>

<p>この例では、<code>devicePixelRatio</code> の値をチェックして必要な変化に対処できるよう、メディアクエリを設定してデバイス解像度がいつ変化するかを監視します。</p>

<h4 id="JavaScript_2">JavaScript</h4>

<p>この JavaScript のコードは、デバイス解像度を監視するメディアクエリを作り、<code>devicePixelRatio</code> の値が変化したときはいつでもそれをチェックします。</p>

<pre class="brush: js">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).addEventListener("change", updatePixelRatio);</pre>

<p>文字列 <code>mqString</code> は、メディアクエリそのものになるように作ります。このメディアクエリは、<code>(resolution: 1dppx)</code> (標準的なディスプレイの場合)、または <code>(resolution: 2dppx)</code> (HiDPI / レティナディスプレイの場合) のような内容で始まり、現在のディスプレイ解像度のピクセルあたりのドット数が特定の数であるかをチェックします。</p>

<p>関数 <code>updatePixelRatio()</code> は、現在の <code>devicePixelRatio</code> の値を取得し、<code>pixelRatioBox</code> 要素の {{domxref("HTMLElement.innerText", "innerText")}} に、その比率を百分率と小数第 2 位までの未加工の 10 進数の値の両方で表示する文字列を設定します。</p>

<p>そして、関数 <code>updatePixelRatio()</code> が最初の値を表示するために一回実行され、その後メディアクエリが作られて <code>updatePixelRatio()</code> を <code>change</code> イベントのハンドラーとして登録するために {{domxref("EventTarget.addEventListener", "addEventListener()")}} が実行されます。</p>

<h4 id="HTML_2">HTML</h4>

<p>この HTML は、説明文を含むボックスと、現在のピクセル比率情報を表示する <code>pixel-ratio</code> ボックスを作成します。</p>

<pre class="brush: html">&lt;div class="container"&gt;
  &lt;div class="inner-container"&gt;
    &lt;p&gt;この使用例により、ページをズームまたはズームアウトすること
       (または異なる表示倍率の画面にページを移動させること) の
       &lt;code&gt;Window.devicePixelRatio&lt;/code&gt; プロパティに与える影響がわかります。
       どのようなことが起こるか、試してみましょう！&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 class="brush: css">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="結果">結果</h4>

<p>{{EmbedLiveSample("Example_2_Monitoring_screen_resolution_or_zoom_level_changes", "100%", 500)}}</p>

<h2 id="Specifications" name="Specifications">仕様</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">仕様</th>
   <th scope="col">状況</th>
   <th scope="col">コメント</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName("CSSOM View", "#dom-window-devicepixelratio", "Window.devicePixelRatio")}}</td>
   <td>{{Spec2("CSSOM View")}}</td>
   <td>初期定義</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザ実装状況</h2>



<p>{{Compat("api.Window.devicePixelRatio")}}</p>

<h2 id="See_also" name="See_also">関連情報</h2>

<ul>
 <li><a href="/ja/docs/Web/CSS/Media_Queries">メディアクエリ</a></li>
 <li><a href="/ja/docs/Web/CSS/Media_Queries/Using_media_queries">メディアクエリの使用</a></li>
 <li><a href="/ja/docs/Web/CSS/@media/resolution">CSS の <code>resolution</code> メディア特性</a></li>
 <li>PPK が行った <a href="http://www.quirksmode.org/blog/archives/2012/06/devicepixelrati.html">devicePixelRatio に関する調査</a></li>
</ul>