In CSS we generally use PX as the unit, in the desktop browser CSS 1 pixels are often corresponding to the computer screen of 1 physical pixels, which may create an illusion, that is, the pixel in CSS is the physical pixels of the device. But this is not the case, the pixel in CSS is just an abstract unit, in different devices or different environments, the 1px in CSS represents the device physical pixels are different. In a Web page designed for desktop browsers, we don't have to worry about this jinjin, but on a mobile device we have to figure this out. In previous mobile devices, screen pixel density is relatively low, such as IPHONE3, its resolution is 320x480, on Iphone3, a CSS pixel is really equal to a screen physical pixels. Later, with the development of technology, mobile device screen pixel density is getting higher, starting from iphone4, Apple introduced the so-called Retina screen, the resolution increased by one times, to become 640x960, but the screen size has not changed, which means that the same size of the screen, the pixel is more than one time, then, A CSS pixel is equal to two physical pixels. Other brands of mobile devices are also the reason. For example, Android devices based on screen pixel density can be divided into ldpi, mdpi, hdpi, xhdpi and other different levels, the resolution is also a variety of, Android device, a CSS pixel equivalent to the number of screen physical pixels, but also because of different devices, there is no conclusion.
Http://www.cnblogs.com/2050/p/3877280.html
1px in CSS is not equal to the 1px of the device