Lines Matching refs:density
20 <li><a href="#ViewportDensity">Defining the viewport target density</a></li>
59 <dt>The device's screen density</dt>
60 <dd>The screen density (the number of pixels per inch) on an Android-powered device affects
61 the resolution and size at which a web page is displayed. (There are three screen density
64 density by scaling a web page so that all devices display the web page at the same perceivable size
65 as a medium-density screen. If graphics are an important element of your web design, you
70 your web page's target screen density and providing alternative graphics for different screen
94 width of the viewport, the initial scale of the page, and the target screen density.
176 still fits the screen even if the device has a high or low-density screen, because the
178 medium-density screen, by default (as you can see in figure 2, when comparing the hdpi device to the
180 viewport target density</a>.</p>
200 density</a>, which is medium-density if you don't specify otherwise. As a result, the image
201 displayed on the high-density device in figure 3 is scaled up in order to match the width
202 of a screen with a medium-density screen.</p>
212 instead of scaling your web page to match the target density, then you must also include
214 the section about <a href="#ViewportDensity">Defining the viewport density</a>. Otherwise, simply
230 density</a> 1-to-1. If set to "2.0", then the page is enlarged (zoomed in) by a factor of 2.
240 density</a>.</dd>
264 density.</p>
269 <h3 id="ViewportDensity">Defining the viewport target density</h3>
271 <p>The density of a device's screen is based on the screen resolution, as defined by the number of
273 density categories supported by Android: low (ldpi), medium (mdpi), and high (hdpi). A screen
274 with low density has fewer available pixels per inch, whereas a screen with high density has more
275 pixels per inch (compared to a medium density screen). The Android Browser and {@link
276 android.webkit.WebView} target a medium density screen by default.</p>
286 <p>Because the default target density is medium, when users have a device with a low or high density
289 size that matches the perceived appearance on a medium density screen. More specifically, the
291 on a high density screen (because its screen pixels are smaller) and approximately 0.75x scaling to
292 pages on a low density screen (because its screen pixels are bigger).</p>
295 size on both the high and medium density device (the high-density device shows the
297 match the target density). This can introduce some undesirable artifacts in your images.
298 For example, although an image appears the same size on a medium and high-density device, the image
299 on the high-density device appears more blurry, because the image is designed to be 320 pixels
302 <p>You can change the target screen density for your web page using the {@code target-densitydpi}
308 <li><code>high-dpi</code> - Use hdpi as the target dpi. Medium and low density screens scale down
310 <li><code>medium-dpi</code> - Use mdpi as the target dpi. High density screens scale up and low
311 density screens scale down. This is the default target density.</li>
312 <li><code>low-dpi</code> - Use ldpi as the target dpi. Medium and high density screens scale up
322 density. In this case, you should also define the viewport width to match the device width, so your
329 <p>Figure 4 shows a web page using these viewport settings—the high-density device
331 medium-density device, so no scaling occurs and the 320-pixel-wide image is drawn using exactly 320
333 you want to customize your web page based on screen density and provide different image assets for
344 "0.75", "1", or "1.5", to indicate that the styles are for devices with low density, medium density,
345 or high density screens, respectively.</p>
347 <p>For example, you can create separate stylesheets for each density:</p>
367 background:url(medium-density-image.png);
371 /* CSS for high-density screens */
373 background:url(high-density-image.png);
378 /* CSS for low-density screens */
380 background:url(low-density-image.png);
386 designed for medium-density devices in order to support devices running a version of Android less
389 <p>The types of styles you might want to adjust based on the screen density depend on how you've
392 density match the device. That is:</p>
403 properties and also some CSS added that applies a high-resolution image for high-density
411 query the density of the current
414 of <code>window.devicePixelRatio</code> is "1.0", then the device is considered a medium density
416 considered a high density device and the page is scaled 1.5x by default; if the value
417 is "0.75", then the device is considered a low density device and the page is scaled
420 target density—as described in the section about <a href="#ViewportDensity">Defining the
421 viewport target density</a>, the default target is medium-density, but you can change the
424 <p>For example, here's how you can query the device density with JavaScript:</p>
428 alert("This is a high-density screen");
430 alert("This is a low-density screen");