Mobile development--physical pixels and logical pixels

Although in the Web App development, only need to master the page layout, page adaptation, the page can be perfect on a variety of devices to show. But why do you do that? What is the rationale for this? So what's the advantage? If you go down, you may not be clear.

   So, let's study the next ~ . 2 pixels   Device pixel device pixels refers to the physical pixels used in the device, also known as hardware pixels  css pixels css pixels are the logical pixels used in CSS styles. If the number of hardware pixels in a device is equal to that of a CSS pixel, there will be no problem. However, due to the appearance of retinal devices, the difference between the two is becoming larger. The number of hardware pixels and the number of CSS primes becomes two distinct pixel types.   For example, the physical pixel in the iphone 4 device screen is 640px*960px, while the CSS logic pixels are 320*480px. Therefore, use about 4 physical pixels to display a CSS pixel.   For images, the goal of Web application developers is to display high-quality images as much as possible to ensure page performance.   Other units related to pixels   What is the device pixel ratio (devices pixel ratio)?   Device pixel ratio refers to the ratio between a device pixel and a CSS pixel. When this ratio is 1:1, 1 device pixels are used to display 1 css pixels. When this ratio is 2:1, 4 device pixels are used to display 1 css pixels. When this ratio is 3:1, 9 (3*3) device pixels are used to display 1 css pixels.   What is pixel density?   =ppi (pixels per inch) of the number of pixels displayed in the inches. In the area of mobile development, PPI is used as the unit of pixel density. The pixel density in the most recent mobile device is shown in the following table. The relationship between pixel density and pixel ratio   Although the higher the device pixel density value, the more pixels displayed per inch, the clearer the image in the device screen. However, there is no direct relationship between the device pixel density value and the device pixel ratio. For example, in a Galaxy S IV device, the device pixel density is 441ppi, the device pixel ratio is 2, and in the HTC One device, the device pixel density is 468ppi and the device pixel ratio is 3.    the DP pixels of the device pixel than the pixel and the DP pixels independent of the device pixel density in the window.devicepixelratio android device   DP is a unit of pixel density that is independent of the device pixel used when creating an Android application. Because of the devices in the 160dpi (dots per inch: points shown in each inch), 1PX=1DP, so in 320dpi devices, 1PX=2DP, in 480dpi devices, 1PX=3DP.   NOTE: This DP is different from the device pixel ratio mentioned earlier.  &nbspThird, about window.devicepixelratio  on the wikipedia page, the device pixel ratio is documented, this article does not describe the specific. Here we only introduce window.devicepixelratio.   in JavaScript scripting, you can use Window,devicepixelratio to get device pixel ratios for devices.  window.devicepixelratio points of attention   In addition, when using Window.devicepivelratio, there are two points to note:  1. Window.devicepixelratio is not supported in Firefox browser and IE browser. 2. The Window.devicepixelratio value may be different in different browsers in the same device.   For example, in 720*1200px's Galaxy Nexus device, The Window.devicepixelratio value in Android browser and Chrome browser is 2, and the Window.devicepixelratio value in Opera browser is 2.25. Due to CSS pixels in the Android browser and Chrome browser The number of 360px in Opera browser css pixels is 320px so the device pixel ratio is calculated as follows:  in Android browser and chrome browser  720/360 = 2  in Opera browser  720/320 = 2.25 in the iphone 5 Safari browser, Chrome browser and opera browser device pixel ratio is 2, 2, 1.  Four, use media query expression   To display a crisp image in a high-resolution device, you can use a query expression-webkit-device-pixel-ratio attribute. Next, we first introduce the-webkit-device-pixel-ratio feature, then introduce the resolution characteristics of the media query expression, and finally, summarize how to use the media query expression for high-resolution devices.  -webkit-device-pixel-ratio - Webkit-device-pixel-ratio was originally a media query expression feature used in the development of an Apple Retina device to convert device pixels to CSS pixels, which was later supported on Android devices.For this feature, the Safari developer Note has the definition:  "-webkit-device-pixel-ratio": the special proportions used in the Apple device: 2 for the retina screen and 1 for the standard screen. Supported in more than 4.0 browsers in Safari.   This ratio is not explained in detail here, only 1 represents the standard screen, and 2 represents the retina screen. However, in iphone 4, the device-pixel-ratio (device pixel ratio) is 2, the number of devices is twice times the number of CSS pixels (640/320px), device-pixel-ratio= device pixels/css pixels   -webkit-device-pixel-ratio  on Android devices is defined in the Android device developer-specific Web site for-webkit-device-pixel-ratio as follows: " In Android browsers and WebView browsers, the-webkit-device-pixel-ratio used to create styles for specific pixel densities is supported. You can specify values of 0.75, 1, and 1.5, each representing a low-pixel density screen, a medium-pixel density screen, and a high-screen screen.   Original link http://html5online.com.cn/articles/2013041701.html

Mobile development--physical and logical pixels