---
id: pixelratio
title: PixelRatio
category: APIs
permalink: docs/pixelratio.html
---
<div><div><p>PixelRatio class gives access to the device pixel density.</p><h3><a class="anchor" name="fetching-a-correctly-sized-image"></a>Fetching a correctly sized image <a class="hash-link" href="docs/pixelratio.html#fetching-a-correctly-sized-image">#</a></h3><p>You should get a higher resolution image if you are on a high pixel density
device. A good rule of thumb is to multiply the size of the image you display
by the pixel ratio.</p><div class="prism language-javascript"><span class="token keyword">var</span> image <span class="token operator">=</span> <span class="token function">getImage</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  width<span class="token punctuation">:</span> PixelRatio<span class="token punctuation">.</span><span class="token function">getPixelSizeForLayoutSize</span><span class="token punctuation">(</span><span class="token number">200</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
  height<span class="token punctuation">:</span> PixelRatio<span class="token punctuation">.</span><span class="token function">getPixelSizeForLayoutSize</span><span class="token punctuation">(</span><span class="token number">100</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token operator">&lt;</span>Image source<span class="token operator">=</span><span class="token punctuation">{</span>image<span class="token punctuation">}</span> style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>width<span class="token punctuation">:</span> <span class="token number">200</span><span class="token punctuation">,</span> height<span class="token punctuation">:</span> <span class="token number">100</span><span class="token punctuation">}</span><span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">&gt;</span></div></div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="docs/pixelratio.html#methods">#</a></h3><div class="props"><div class="prop"><h4 class="methodTitle"><a class="anchor" name="get"></a><span class="methodType">static </span>get<span class="methodType">()</span> <a class="hash-link" href="docs/pixelratio.html#get">#</a></h4><div><p>Returns the device pixel density. Some examples:</p><ul><li>PixelRatio.get() === 1<ul><li>mdpi Android devices (160 dpi)</li></ul></li><li>PixelRatio.get() === 1.5<ul><li>hdpi Android devices (240 dpi)</li></ul></li><li>PixelRatio.get() === 2<ul><li>iPhone 4, 4S</li><li>iPhone 5, 5c, 5s</li><li>iPhone 6</li><li>xhdpi Android devices (320 dpi)</li></ul></li><li>PixelRatio.get() === 3<ul><li>iPhone 6 plus</li><li>xxhdpi Android devices (480 dpi)</li></ul></li><li>PixelRatio.get() === 3.5<ul><li>Nexus 6</li></ul></li></ul></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="getfontscale"></a><span class="methodType">static </span>getFontScale<span class="methodType">()</span> <a class="hash-link" href="docs/pixelratio.html#getfontscale">#</a></h4><div><p>Returns the scaling factor for font sizes. This is the ratio that is used to calculate the
absolute font size, so any elements that heavily depend on that should use this to do
calculations.</p><p>If a font scale is not set, this returns the device pixel ratio.</p><p>Currently this is only implemented on Android and reflects the user preference set in
Settings &gt; Display &gt; Font size, on iOS it will always return the default pixel ratio.
@platform android</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="getpixelsizeforlayoutsize"></a><span class="methodType">static </span>getPixelSizeForLayoutSize<span class="methodType">(layoutSize)</span> <a class="hash-link" href="docs/pixelratio.html#getpixelsizeforlayoutsize">#</a></h4><div><p>Converts a layout size (dp) to pixel size (px).</p><p>Guaranteed to return an integer number.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="roundtonearestpixel"></a><span class="methodType">static </span>roundToNearestPixel<span class="methodType">(layoutSize)</span> <a class="hash-link" href="docs/pixelratio.html#roundtonearestpixel">#</a></h4><div><p>Rounds a layout size (dp) to the nearest layout size that corresponds to
an integer number of pixels. For example, on a device with a PixelRatio
of 3, <code>PixelRatio.roundToNearestPixel(8.4) = 8.33</code>, which corresponds to
exactly (8.33 * 3) = 25 pixels.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="startdetecting"></a><span class="methodType">static </span>startDetecting<span class="methodType">()</span> <a class="hash-link" href="docs/pixelratio.html#startdetecting">#</a></h4><div><p>// No-op for iOS, but used on the web. Should not be documented.</p></div></div></div></span></div>