mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
20 lines
5.0 KiB
Markdown
20 lines
5.0 KiB
Markdown
---
|
|
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"><</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">></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 > Display > 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> |