Mobile Web page Knowledge summary of pixels, physical pixels, and logical pixels

All along, I on the mobile resolution, pixels, such as the concept of silly, special look at a number of cattle people blog after the summary of the following points for future review.

Document Source

Http://weizhifeng.net/you-should-know-about-dpi.html
Http://www.chinaz.com/manage/2015/0902/441624.shtml
Http://www.cnblogs.com/2050/p/3877280.html
Http://www.uisdc.com/mobile-ui-measurement-guideline
Http://www.25xt.com/appdesign/8336.html
http://www.zhangxinxu.com/wordpress/2012/08/window-devicepixelratio/ css Pixels

    CSS pixels are abstract units with no actual size, which is a relative length, which is relative to the resolution of the computer or phone display.

However, in different devices or different environments, the size represented by 1px is different, as shown in the following table:

Phone Type	Huawei Glory 7	IPhone6
Main screen Size	5.2 inch	5 inch
Resolution	1920px*1080px	1920px*1080px
Ppi	424PPI	469PPI

The same is an inch, the same is the pixel, why the Apple phone an inch has 469 pixels, Huawei only 424 pixels

For reasons see: http://blog.csdn.net/aiolos1111/article/details/51967744 ' device pixel relativity '
Description: Pixel this thing is getting smaller on an Apple phone

Conclusion:
1, because on the mobile phone page, the page zoom ratio is 1, so on the mobile phone side of the page a pixel corresponding to a dip (device logic pixels)
2, the size of the pixel is not fixed, like a gold hoop, can become larger and smaller device physical pixels

On the same device, the number of physical pixels is fixed, which is set by the manufacturer at the factory ———— that is, the resolution of a device is fixed

The ratio of the physical pixel to the dip is the scale of the Web page, and if the page is not scaled, then a single physical pixel corresponds to a dip (device logic pixel); dip&dp&pt&sp device independent pixels (logical pixels)

     As the mobile device screen PPI continues to improve, the way developers used to measure display elements with physical pixels (physical Pixel) has not worked. To solve this problem, both platforms put forward the concept of abstract pixels: iOS is called PT (point, display points), Android is called DP/DIP (device independent Pixel, equipment-independent pixels), if there is no special instructions, The following uniform is described using DP. The
    SP (scale-independent pixel) is a scale-independent pixel, which is abstract pixels like DP and PT, but is used to describe the size of the font.

Conclusion:
1, DP is a device's hardware pixel-independent units, a DP in any pixel density device screen occupies the same spatial logical pixels and physical pixels of the corresponding relationship

The corresponding relationship between the logical pixel of the iphone and the physical pixel is shown below:

The corresponding relationship between the logical pixel of Android phone and the physical pixel is as follows:

Screen Point

type	physic Pixel	Logic
720p	720*1280	360*640
1080P	1080*1920	360*640
2k	1440*2560	360*640

DPR device pixel scaling ratio

   DPR (device pixel ratio devices pixel scaling ratio) is officially defined as: the ratio of the physical pixels of the device to the device's independent pixels, i.e. Devicepixelratio = physical pixels/independent pixels.

So my conclusions on the mobile side is:
1, Devicepixelratio is mostly trustworthy on the most browsers.
2, on IOS devices, multiply devicepixelratio by screen.width to get the physical pixel count.
3, on Android and Windows Phone devices, divide screen.width by Devicepixelratio to get the dips count.

President

    On the mobile side I'm jumping to the conclusion
1, DPR on most browsers is still very credible
2, on iOS devices, dpr*screen.width = physical pixel
3, on Android and WP devices, dip = Screen.width  /DPR
4, the origin of the different formulas that appear in 2 and 3 are the different meanings of the values that the screen.width read from different devices, as follows: physical pixel  Logic Pixel dip  Chapter

In the mobile browser and some desktop browsers, the Window object has devicepixelratio this property, but note that there are some compatibility issues with Devicepixelratio in different browsers (see figure below). So now we can't trust this thing completely.

For more details on DPR, please read the PPK of the Great God: Devicepixelratio

Original source: PPK Greater about devicepixelratio physical pixels

On IOS Retina devices, Screen.width gives the width in dips. So both a retina and a Non-retina iPad report 768 in portrait mode.
On the three Android devices, Screen.width gives the width in physical pixels; 480, 720, and respectively. All browsers in the devices use the same values. (Imagine If some browsers on the same device used dips and others physical pixels!)

President
On iOS devices, the value of Screen.width is dip
On Android and on Windows Phone devices, the value of screen.width is the physical pixel logical pixel dip

Give your Page a <meta name= "viewport" content= "width=device-width";, read out Document.documentElement.clientWidth, and most browsers would give you the width of the layout viewport, which now equals t He dips width.

President

When the ' <meta name= ' viewport "content=" Width=device-width ">" is set on the page, ' Document.documentElement.clientWidth ' In most browsers, you get the width of the layout viewport, which is equivalent to the dip

working with PPI in iOS

First of all, the high PPI 1DP equals 1px, and the PPI as the benchmark (1x multiplier), if the display device PPI is twice times the benchmark PPI, then 1DP equals 2px (2x multiplier), is actually a simple primary multiplication.

Original URL: http://weizhifeng.net/you-should-know-about-dpi.html

    Rules: In the
        iphone series, 3g/s is 1x multiplier (163PPI), the other 2x multiplier,iphone6 and above for 3x multiplier
        in the ipad series, ipad 1 and 2 on behalf of 1x Multiplier (132PPI), the other 2x multiplier
        in the ipad mini series, the ipad mini generation is 1x multiplier (163PPI), the others are 2x multiplier

Android Processing PPI

Android system-defined four pixel density

pixel density	ldpi	mdpi	hdpi	xhdpi
Ppi	120	160	240	320
Dpr	0.75	1.0	1.5	2.0

You can see that the mdpi in Android is the same as the PPI represented by 1x multiplier in iOS, xhdpi the same PPI as the 2x multiplier of iOS, as shown below

Design Page

In the design and development process, should try to use the logical pixel size to think about the interface

IPhone

    The most current is the iphone5/5s screen. The magnification is 2 and the logic pixel 320x568. The biggest rise in the future is expected to be the first on the iphone 6 screen. The magnification is 2 and the logic pixel 375x667.
    in accordance with these two sizes to design, are the more mainstream approach. With a shorter iphone 4s, a bigger 6 Plus won't be too empty.
    However, in the transduction of the time to note that because the iphone 6 Plus 3 times times the figure is magnified by twice times the graph, so the bitmap should be careful to ensure clarity. 

Android

  Today's Android screen logic pixels are becoming unified: 360x640

phone-side web page

The popular approach to mobile-phone web pages is to design in terms of the size of the iphone 5. Magnification 2, logic pixel 320x568.
 This is true, magnification 2 screen in both iOS and Android is the mainstream, but also twice times the screen of the smallest logical pixels. So the size of the picture can be kept at a smaller level and the page loads faster. Of course, the disadvantage is that the magnification 3 of the device to see, the picture is not particularly clear.
 if the pursuit of image quality, willing to sacrifice loading speed, then you can follow the largest screen to design. That is, the iphone 6 Plus size, magnification 3, logic pixel 414x736.

Summary

    The real decision to display the effect is the logical pixel size. For this reason, both iOS and Android platforms define their own logical pixel units.

    when you design a mobile Web page, the most popular way to do this is to design your iphone 5 in size. Magnification 2, the logical pixel 320x568, that is, the design page size is: 640pxx1136px

attached: 1px in CSS is not always equal to the 1px of the device

Pixels are just an abstract unit, and in different devices or different environments, the physical pixels of the device represented by 1px in CSS are different.
in a Web page designed for desktop browsers, the 1 pixels of CSS tend to be 1 physical pixels corresponding to the computer screen, so we don't have to worry about this jinjin, but on a mobile device we have to figure this out.
In previous mobile devices, the screen pixel density (PPI) 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. The
also has a factor that can cause PX in CSS to change, that is, user zoom. For example, when the user enlarges the page by one time, the physical pixels represented by 1px in the CSS will also increase by one time, whereas the physical pixels represented by 1px in the CSS will be reduced by a factor of one time.