Lines Matching full:device
23 <li><a href="#DensityCSS">Targeting Device Density with CSS</a></li>
24 <li><a href="#DensityJS">targeting Device Density with JavaScript</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
86 not the dimensions of the device screen. For example, although a device screen might have a width of
98 should exactly match the device screen width and that the ability to zoom should be disabled:</p>
103 <meta name="viewport" content="width=device-width, user-scalable=no" />
113 <b>height</b> = [<em>pixel_value</em> | device-height] ,
114 <b>width</b> = [<em>pixel_value</em> | device-width ] ,
119 <b>target-densitydpi</b> = [<em>dpi_value</em> | device-dpi |
166 values less than (or equal to) 320 result in a value equal to the device-width (discussed below).
175 and the device's screen width does <em>not</em> match those dimensions, then the web page
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
179 mdpi device). Screen densities are discussed more in <a href="#ViewportDensity">Defining the
186 viewport size to always match the dimensions of the device screen, by defining the
188 and {@code width} with the values {@code device-height} and {@code device-width}, respectively. This
194 <meta name="viewport" content="width=device-width" />
199 when the current device does not match the <a href="#ViewportDensity">target
201 displayed on the high-density device in figure 3 is scaled up in order to match the width
207 width=device-width} <em>or</em> {@code initial-scale=1.0}.</p>
211 device-width} and {@code device-height} to match the physical screen pixels for every device,
213 the {@code target-densitydpi} property with a value of {@code device-dpi}. This is discussed more in
215 using {@code device-height} and {@code device-width} to define the viewport size makes your web page
216 fit every device screen, but scaling occurs on your images in order to adjust for different screen
232 Because the default viewport width is 800 pixels, if the device screen resolution is less than
271 <p>The density of a device's screen is based on the screen resolution, as defined by the number of
282 width=device-width} and {@code target-densitydpi=device-dpi}.</p>
286 <p>Because the default target density is medium, when users have a device with a low or high density
295 size on both the high and medium density device (the high-density device shows the
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
306 <li><code>device-dpi</code> - Use the device's native dpi as the target dpi. Default scaling never
320 the {@code target-densitydpi} viewport property to {@code device-dpi}. When you do, the page is
322 density. In this case, you should also define the viewport width to match the device width, so your
326 <meta name="viewport" content="target-densitydpi=device-dpi, width=device-width" />
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
338 <h2 id="DensityCSS">Targeting Device Density with CSS</h2>
342 screen densities—the <code>-webkit-device-pixel-ratio</code> CSS media feature. The
350 <link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 1.5)" href="hdpi.css" />
351 <link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 1.0)" href="mdpi.css" />
352 <link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 0.75)" href="ldpi.css" />
359 specific screen densities using the {@code -webkit-device-pixel-ratio} media feature. Notice
360 that the hdpi device shows a different image that's applied in CSS.</p>
370 @media screen and (-webkit-device-pixel-ratio: 1.5) {
377 @media screen and (-webkit-device-pixel-ratio: 0.75) {
387 than 2.0, which do not support the {@code -webkit-device-pixel-ratio} media feature.</p>
392 density match the device. That is:</p>
395 <meta name="viewport" content="target-densitydpi=device-dpi, width=device-width" />
401 figure 4. However, by adding some custom CSS using the {@code -webkit-device-pixel-ratio} media
408 <h2 id="DensityJS">Targeting Device Density with JavaScript</h2>
412 device—the <code>window.devicePixelRatio</code> DOM property. The value of this property
413 specifies the scaling factor used for the current device. For example, if the value
414 of <code>window.devicePixelRatio</code> is "1.0", then the device is considered a medium density
415 device and no scaling is applied by default; if the value is "1.5", then the device is
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
424 <p>For example, here's how you can query the device density with JavaScript:</p>
