---
title: '-webkit-device-pixel-ratio'
slug: Web/CSS/@media/-webkit-device-pixel-ratio
translation_of: Web/CSS/@media/-webkit-device-pixel-ratio
---
<div>{{ CSSRef() }}</div>

<p>{{ Non-standard_header() }}</p>

<p><strong><code>-webkit-device-pixel-ratio</code></strong> 是一个非标准的布尔类型CSS媒体类型，是标准 <a href="/en-US/docs/Web/CSS/@media/resolution"><code>resolution</code></a> 媒体类型的一个替代方案.</p>

<p>Its value is the number of device pixels used to represent each <a href="/en-US/docs/Web/CSS/length#Absolute_length_units">CSS <code>px</code></a>. Although the value is a {{cssxref("&lt;number&gt;")}} and thus doesn't syntactically allow units, its implicit unit is <a href="/en-US/docs/Web/CSS/resolution#dppx"><code>dppx</code></a>.</p>

<h3 id="Syntax" name="Syntax">Syntax</h3>

<p><strong><code>-webkit-device-pixel-ratio</code></strong> is a range value meaning the prefixed <strong><code>-webkit-min-device-pixel-ratio</code></strong> and <strong><code>-webkit-max-device-pixel-ratio</code></strong> are also available.</p>

<pre class="brush: css">@media (-webkit-min-device-pixel-ratio: 2) { ... }
/* is equivalent to */
@media (min-resolution: 2dppx) { ... }

/* And likewise */
@media (-webkit-max-device-pixel-ratio: 2) { ... }
/* is equivalent to */
@media (max-resolution: 2dppx) { ... }
</pre>

<h3 id="Specifications" name="Specifications">Specifications</h3>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('Compat', '#css-media-queries-webkit-device-pixel-ratio', '-webkit-device-pixel-ratio')}}</td>
   <td>{{Spec2('Compat')}}</td>
   <td>Initial standardization</td>
  </tr>
  <tr>
   <td><a class="external external-icon" href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/OtherStandardCSS3Features.html#//apple_ref/doc/uid/TP40007601-SW3" hreflang="en" lang="en">Safari CSS Reference<br>
    <small lang="en-US">'media query extensions' in that document.</small></a></td>
   <td>Non-standard unofficial documentation</td>
   <td>Initial documentation</td>
  </tr>
 </tbody>
</table>

<h3 id="See_also" name="See_also">See also</h3>

<ul>
 <li><a href="/en-US/docs/Web/CSS/@media/-webkit-transform-2d"><code>-webkit-transform-2d</code></a></li>
 <li><a href="/en-US/docs/Web/CSS/@media/-webkit-transform-3d"><code>-webkit-transform-3d</code></a></li>
 <li><a href="/en-US/docs/Web/CSS/@media/-webkit-transition"><code>-webkit-transition</code></a></li>
 <li><a href="/en-US/docs/Web/CSS/@media/-webkit-animation"><code>-webkit-animation</code></a></li>
</ul>