Front End- <基础> -PX,PPI,DPR, solving iphone adaptation problems

Brief Introduction

Recently only really understand what is px, the spirit of the problem fully figured out the attitude, and thus explore the corresponding information. The feeling and the hair, record. what is px.

PX, full name pixel, translation is the meaning of "pixel", representing the screen resolution unit, EX:1366*768PX.
however PX does not represent a length unit , PX is more like a color block, such as a 1366*768px screen notebook, which shows that the screen has a maximum of 1366 pixels in the color block, vertical up to 768 pixels. 1366x768 is all the color blocks on this screen, each color block presents a different color, and it represents different text and pictures and so on. Why PX is not a length unit.

Why PX is not a unit of length, this is the term for PPI .
PPI, the full name pixels per Inch, represents the number of pixels (Pixel) each inch.
Inch is a unit of length, such as the 114ppi screen, which is the 114px color block =1inch (inch), then 1px=1/114inch (114 inches), if 96ppi screen, that is, 96px =1inch (inches), then 1px =1/96inch (one inch in 96). They are the same type of 1px, but they are certainly not equal in length. calculation formula for PPI:

According to the Pythagorean Theorem, √ (x²+y²) calculates the number of color blocks (px) on the diagonal of the screen, divided by the screen size, and the screen size is the length of the screen diagonal, calculating the number of color blocks (px) per inch. what is DPR.

DPR Full name device pixles ratio device pixel ratio.
DPR history: Apple's iphone, in order to make users see more clearly, the result of a retina screen, such as the iphone 4s,326ppi screen, at that time is the average Android phone PPI twice times, the bombing of heaven, The idea is to give users a clearer picture of the number of pixels in the same-inch cell phone that is twice times the size of Android.
So the DPR is 2.

DPR Calculation formula:
Physical pixel/css pixels (in single direction, x or y direction) =dpr.

What the physical pixel is. Physical pixels refer to the actual pixel of the cell phone, such as the iphone5 device pixel as 640px*1136px.
What CSS pixels are. That is, browser-defined pixel, browser rules: Whether you are a normal screen, or hanging the sky of the Retina screen, the default is to 160ppi screen computing pixels, so the iphone5 css pixel is about 320px*568px. (or the browser Diao.) ）
Disclaimer: DPR 2,DPR 3 appears on the mobile side is more common, however, the notebook is generally <=1.0DPR. solve the problem of setting the border 1px on the iphone, which is actually 2px

To sum up, can be extended out, when this phone for dpr=2 screen of the phone, while setting the
Meta name= "viewport" content= "Width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"

Concept of viewport:

Layout viewport layout viewport-– The width of the page at the start of the design (e.g. 960px)
Visual viewport the Visual viewport-– browser will automatically zoom the layout viewport to the visible width that can be displayed on the phone (zoom for mobile device width/Layout viewport width ex:320/960=0.3)
The zoom of the user that the Web page renders on the phone changes the visual viewport width
Ideal viewport ideal viewport--in accordance with the ideal viewport layout you want the user not to zoom to render a good page effect when the layout viewport = device Width users do not have to scale to render a good page effect

Set Ideal viewport width-–
Set the layout viewport width = Browser default device width (CSS pixels, such as iphone 640px, browser default width 160ppi under 320px)

If you do not set the width of the layout viewport, the width of the layout viewport is the default width of the browser manufacturer ex:960px 980px

So in fact, when this cell phone is dpr=2 's screen, the physical pixel of the 1px css pixel =2px in the browser, that is, the 1px color block in the code represents the 2px physical color block. At this point, one of the solutions is to achieve 1px pixels based on the devicepixelratio of the media query to scale accordingly. Why there is a @2x,@3x diagram of the appearance.

This is for different DPR devices, 1pxCSS pixel = multiple physical pixel design, imagine, a 320px*568px picture, in iphone5 hand, full screen show what effect?
Because the picture is physical pixel, at this time the real physical pixel picture, 1px corresponds to 2px mobile phone physical pixel, which means that the cell phone every 1px physical pixel corresponds to the 0.5px pixel points. At this point the browser, 320px*568px picture will be forcibly stretched to 640px*1136px, so as to meet, 1 pictures physical pixel points corresponding to 1 devices pixel points (the actual picture is 0.5px corresponds to 1 physical pixel points). So the picture will be blurred, when the 640px picture, 1 pictures of the physical pixel points corresponding to 1 devices pixel points, will be clear and not blurred.