Deep understanding of mobile-pixel knowledge and viewport knowledge (RPM)

One pixel knowledge 1.1 device pixel (Devices pixel)

It is a physical concept, referring to the physical pixels used in the device (physic pixel). This unit is represented by PX, which is a [relative absolute unit] ————
That is, on the same device, the physical length (such as inches) represented by each of the 1 device pixels is fixed (that is, the absolute nature of the device pixels);
However, between different devices, the physical length (such as inches) represented by each of the 1 device pixels is changeable (i.e. the relativity of the device pixels);

The unit resolution we are talking about is the device pixel.

With the device pixel concept, we can explain the following table: on mobile devices of different inch sizes, the resolution is the same ———— because of the relativity of the device pixels

Note: The data source in the table
 8:http://www.vmall.com/product/938665621.html
Iphone6s plus:https://www.apple.com/cn/iphone-6s/specs/

1.1.1 Device Resolution

Device resolution is the unit pixel (px).

Refer to the device resolution, by the way, a blog with the following address explained:
Http://www.chinaz.com/manage/2015/0902/441624.shtml

On the same phone or computer device, its device pixel is fixed, this is the factory set up the ———— that the resolution of a device is fixed.

So you can adjust the resolution of the computer screen (the phone does not have this function!) )？ That's just your eyes cheating on you, for specific reasons please see:
http://www.chinaz.com/manage/2015/0902/441624.shtml < computer screen can adjust the resolution, is it achieved by adjusting its pixel size? > section

1.2 css pixels (CSS pixel)

device pixels and CSS pixels generally use PX as the unit, and in the desktop browser 100% zoom, 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, CSS pixels are just an abstract unit, in different devices or different environments, the 1px in CSS represents the device physical pixel length is 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.

The above discussion has the following conclusions:

1px in CSS does not always represent 1px on device pixels, especially on mobile devices.

CSS pixels are the concept of Web programming, referring to the logical pixels used in CSS style code. It is a [pure relative unit] ————
On the same device, the physical pixels represented by each of the 1 CSS pixels are changeable (i.e. the relativity of the first aspect of the CSS pixels);
Between different devices, the physical pixels represented by each of the 1 CSS pixels are changeable (that is, the second aspect of CSS pixels is relative);

As can be seen from the above definition:

The CSS pixel is a relative unit, relative to the device pixel.
(Original address: http://www.jianshu.com/p/af6dad66e49a)

1.2.1 Scaling

Refer to the PPK of the great God to illustrate the principle of scaling:

Zooming as implemented in modern browsers consists of nothing more than ' stretching up ' pixels. That's, the width of the element is not a changed from pixels; Instead the actual pixels is doubled in size. Formally, the element still has a width of $ CSS pixels, even though it happens to take the space of the device pixels. (original URL: http://www.quirksmode.org/mobile/viewports.html)

President
The way in which modern browsers scale is "stretched" pixels (that is, the length of each CSS pixel is changed, and the total number of pixels is constant). (If an element of 128px is magnified one more times, the translator note) The width of the element does not change from 128px to 256px, in fact only "actual pixels" become twice times the size (that is, 256px), and the form of the element width or 128px, Although it already occupies 256 of the device pixel space.

So, we can get the following conclusion:

Scaling can cause changes in CSS pixels-that is, the physical pixel changes that are represented by each of the 1 css pixels. 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.

So, with the above description, we can get the following conclusion:

Page scaling = physical pixels/css pixels

1.3 Dpi&ppi

The definitions for DPI and PPI in reference http://weizhifeng.net/you-should-know-about-dpi.html are as follows:

DPI (dots per inch) is the number of ink points the printer can spray per inch for the density of metric space points in the printing industry
PPI (pixels per inch) is the number of pixels per inch of the screen (that is, the number of pixels in a square with a diagonal length of 1 inches) that measures the density of pixels on the computer display
Currently, the PPI (mainly iOS) and dpi (for example, in Android) are used in the parameter description of the computer display device, and both mean the same, representing the density of the screen pixels.

Screen pixel density, screen resolution, screen size the relationship between the three are as follows:

Note: In the formula, such as resolution is 1920px*1080px, then 1920px is the formula in the longitudinal, 1080px is the formula in the horizontal

1.4 DPR

Full name device pixel ratio (Devices Pixel Ratio). The official definition is given first:

In the mobile browser and in some desktop browsers, the Window object has a Devicepixelratio property, which 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.

The above formula calculates the PPI in order to get the density demarcation, to obtain the default scaling ratio, that is, the device pixel ratio –DPR

The Android device pixel ratio is as follows:

By the know, the PPI in 120-160 between the cell phone is classified as low-density mobile phones, 160-240 is classified as medium density, 240-320 is classified as high density, more than 320 is classified as ultra-high density (Apple gave it a tall name--retina)
(Original address: http://www.jianshu.com/p/af6dad66e49a)

Getting the Apple device pixel ratio is relatively straightforward:

First, specify a density demarcation base of 160, then the device pixel ratio =ppi divided by the density demarcation base 160

The relationship between 1.5 DPR and PPI

The relationship between DPR and PPI can be obtained by combining the above-mentioned density demarcation between Android and Apple as follows:

DPR = ppi/160

1.6 The relationship between device pixels and css pixels

When you get the device pixel ratio (DPR), you know the ratio between the device pixel and the 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, and when this ratio is 3:1, 9 css pixels are displayed using 1 (3*3) device pixels.

So, here's the formula:

DPR = device pixel/css pixels

1.7 device independent pixels (Devices independent Pixel)

Also known as a logical pixel, referred to as dip.

Based on the relationship between the device pixel and the CSS pixel, and the official definition of DPR, we can infer:

CSS pixel = device independent pixel = logical pixel

Below, or refer to the content description in the http://www.cnblogs.com/2050/p/3877280.html article:

In the mobile browser and in some desktop browsers, the Window object has a Devicepixelratio property, which 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.
CSS pixels can be viewed as independent pixels of the device, so by devicepixelratio we can see how many physical pixels the previous CSS pixel represents. For example, on the iphone of the retina screen, the value of Devicepixelratio is 2, which means that 1 css pixels are equivalent to 2 physical pixels. However, it is important to note that Devicepixelratio has some compatibility problems in different browsers, so we still can't rely on this thing completely, the specific situation can see this article

Two viewport knowledge

For viewport's knowledge, the following 7 blogs are mainly read:
PPK's three articles on viewport:
Http://www.quirksmode.org/mobile/viewports2.html
Http://www.quirksmode.org/mobile/viewports.html
http://www.quirksmode.org/mobile/metaviewport/#t10
And the translation of these three articles:
Http://weizhifeng.net/viewports2.html
Http://weizhifeng.net/viewports.html
http://blog.csdn.net/aiolos1111/article/details/51919795
And the blogs that are mentioned at the beginning of this article:
Http://www.cnblogs.com/2050/p/3877280.html

First cite the instructions in the PPK article to explain what is viewport

George Cummins explains the basic concept best here at Stack Overflow:

“
Imagine the layout viewport as being a large image which does not change size or shape. Now image you have a smaller frame through which your look at the large image. The small frame is surrounded by opaque material which obscures your view of all but a portion of the large image. The portion of the large image that you can see through the frame is the visual viewport. You can back away from the large image while holding your frame (zoom out) to see the entire image at once, or can MOV e Closer (zoom in) to see only a portion. can also change the orientation of the frame, but the size and shape of the large image (layout viewport) never change S.
”

See also this explanation by Chris.

The visual viewport is the part of the page that's currently shown on-screen. The user may scroll-the the part of the page he sees, or zoom to change the size of the visual viewport.
(Original address: http://www.quirksmode.org/mobile/viewports2.html)

President

George Cummins the best explanation for the basic concepts on stack Overflow:
Think of layout viewport as a large picture that cannot be changed in size or shape. Now imagine that you have a smaller frame, and you look at the big picture through it. The small frame is surrounded by opaque material that masks all of your sight, and you can only see part of the big picture. Part of the larger image you can see through this framework is the visual viewport. You can pull back (zoom in) the frame to view the entire picture, or you can close some (narrow the frame) to see only the local. You can also change the direction of the frame, but the size and shape of the large map (layout viewport) will never change.

Chris gives an explanation of visual viewport:
Visual viewport is the part of the page that is displayed on the current screen. The user can scroll to change the portion of the page he sees, or zoom to change the size of the visual viewport.
(Original address: http://blog.csdn.net/aiolos1111/article/details/51956691)

Let me explain in my own understanding what is viewport:

1. Viewport is a "canvas" that is used to display a Web page on a mobile device browser (or perhaps a webview in an app).

2. The page on the mobile device is displayed on the viewport.

3, mobile device browser has viewport meta tag, and the purpose of introducing viewport is to solve the PC page can be displayed on the phone normally, not because the screen is smaller and squeeze layout caused by the page layout confusion problem.

4, after the introduction of the viewport concept and do the following provisions, will not destroy those not for mobile browser optimization of the layout of the PC Web page, users can pan and zoom to see the rest of the page.

The width of the layout viewport on the mobile device is equal to the width of the viewable area (visual viewport)
(Original address: http://www.quirksmode.org/mobile/metaviewport/#t10)

5, PPK great God for mobile devices on the viewport has a lot of research, he thinks mobile devices have three viewport:layout viewport, visual viewport and ideal viewport.

Let's explain these three kinds of viewport separately

2.1 Layout viewport (layouts viewport)

This is the first viewport introduced by a mobile device. Cite a paragraph I appreciate very much to say the layout viewport:

First, the browser on the mobile device thinks it must be able to display all the sites properly, even those that are not designed for mobile devices. However, if the viewable area of the browser as the default viewport, because the mobile device screen is not very wide, so those designed for desktop browsers on the mobile device display, it will inevitably because the mobile device viewport too narrow, and squeeze a group, even the layout of anything will be messy. Some people may ask, now is not a lot of mobile phone resolution is very large, such as 768x1024, or 1080x1920, then such a phone used to show the desktop browser design site is not a problem? As we have already said, the 1px in CSS does not represent the 1px on the screen, the larger the resolution, the more physical pixels in the CSS will be represented by 1px, and the greater the value of the Devicepixelratio, which is well understood, because your resolution is increased, but the screen size does not grow much, The 1px in the CSS must represent more physical pixels in order to make 1px of things on the screen the same size as those of low-resolution devices, or it will be too small to see. So on a device like 1080x1920, by default, perhaps you just set the width of a div to 300 px (depending on the value of Devicepixelratio), which is the width of the full screen.

Back to the point, if the mobile device on the visual area of the browser is set to viewport, some sites will be viewport too narrow to show confusion, so these browsers decided by default to set viewport to a wider value, such as 980px, In this way, even those websites designed for the desktop can be displayed on the mobile browser normally. PPK The default viewport of this browser is called Layout viewport.

Lists the width of the default layout viewport for browsers on some devices:

Note: The figure is referenced from: http://www.quirksmode.org/mobile/metaviewport/#t10
The figures in the figure are reasonable, there is no right or wrong, this value is determined by the equipment manufacturers themselves.

2.1.1 The process of rendering a Web page in a mobile browser

Here it is necessary to explain the process of rendering a Web page in a mobile browser:

Step 1: Render ———— render the entire page in a layout viewport to ensure that the page is properly formatted.
Step 2: Zoom ———— Zoom the entire layout viewport to the visual viewport size to ensure that the page is fully displayed on the phone screen

It is also because of the scale, will appear on the phone font-size for 40px and PC font-size12px the same physical size situation

2.1.2 Get the dimensions of layout viewport

Size of layout viewport can be obtained through document.documentElement.clientWidth and-height
Compatibility: This access is fully supported on Android and iphone phones.
(Original address: http://weizhifeng.net/viewports2.html)

2.2 Visual viewport (visual viewport)

Also cite a paragraph I appreciate very much to say that the visual viewport:

Because the width of the browser viewable area (visual viewport) is smaller than the width of this layout viewport (see Fourth < summary > 7th), the result is that the browser will appear with a horizontal scroll bar, So we also need a viewport to represent the size of the viewable area of the browser, PPK this viewport called visual viewport.

2.2.1 Getting the dimensions of the visual viewport

For visual viewport, it is measured by window.innerwidth/height. It is obvious that when the user shrinks or zooms in, the dimensions of the measurements change.
Compatibility: Fully supported on iphone, not available in Android 2, Oprea Mini and UC 8.
(Original address: http://weizhifeng.net/viewports2.html)

2.3 Ideal Viewport (ideal viewport)

Once again, I would like to quote ideal viewport:

And because more and more Web sites are being designed individually for mobile devices, there must also be a viewport that fits perfectly with mobile devices. The so-called perfect adaptation refers to the fact that the user will not need to zoom and horizontal scroll bar to view all the contents of the site, and secondly, the size of the displayed text is appropriate, such as a 14px size of text, not because in a high-density pixel screen is too small to see, Ideally, this 14px of text, regardless of the density of the screen, at what resolution, the size of the display is similar. Of course, not just text, other elements like pictures and so is the truth. PPK called this viewport the ideal viewport, the ideal viewport--for a third viewport mobile device. The

Ideal viewport does not have a fixed size, and different devices have different ideal viewport. All iphone ideal viewport width is 320px, regardless of its screen width is 320 or 640, that is, in the iphone, the 320px in the CSS represents the width of the iphone screen.

But Android devices are more complex, there are 320px,, 384px and so on, about the different devices ideal viewport the width of how much, you can go to/HTTP Viewportsizes.com to see, it collects the ideal width of many devices.

To summarize: PPK the viewport on mobile devices into layout viewport, visual viewport, and ideal viewport, where ideal viewport is the most suitable viewpo for mobile devices The width of the rt,ideal viewport is equal to the screen width of the mobile device (that is, the device logic pixels, the author notes), as long as the width of an element in the CSS is set to ideal viewport width, then the width of the element is the width of the device screen, that is, the width of 100% The effect. The significance of ideal viewport is that, regardless of the resolution of the screen, those designed for ideal viewport site, do not need the user manual scaling, and do not need to appear horizontal scroll bar, can be perfectly presented to the user.

From the above description, we can get a conclusion:

The width of the ideal viewport is equal to the screen width of the mobile device (this ideal width is the width calculated in CSS pixel units, i.e. the screen's logical pixel width), which is not related to the physical width of the device. In CSS, this width is equivalent to the width represented by 100%.

That is:
Ideal width of viewport = logical pixel width of the screen

Finally, we say through a quote that the necessity of the existence of ideal viewport:

Why is it necessary to have an ideal viewport? For example, a mobile phone with a resolution of 320x480 ideal viewport width is 320px, and another screen size is the same, but the resolution of 640x960 phone's ideal viewport width is 320px, Then why the resolution of the phone's ideal width of the cell phone with a small resolution of the ideal width of the same? This is because it is the only way to ensure that the same site looks the same or similar on devices with different resolutions. In fact, although there are so many different types of different brands of mobile phones, but their ideal viewport width summed up is no more than 320,  384, 400, and so on, are very close, The close proximity of the ideal width also means that the site we make for the ideal viewport of a device does not perform as much or even as it does on other devices.

Triple META tag Control viewport

The default viewport for mobile devices is layout viewport, but when it comes to the development of mobile device sites, we need ideal viewport. So how do you get ideal viewport? It's time for the meta tag to appear.

When developing websites for mobile devices, it is recommended that you use the following code in the head tag:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

• 1

What is the purpose of this piece of code?

Allow users to scale different sites have different requirements, we do not make too much explanation, the key to look atwidth=device-widthandinitial-scale=1.0the role of:

Setting initial-scale This rule actually does the following 2 things:
1, set the page initial scaling factor to the given value, calculate the width relative to the ideal viewport, get the width of the visual viewport.
2. Set layout viewport width equal to the width of the visual viewport just calculated
(Original address: http://www.quirksmode.org/mobile/metaviewport/#link15
Address: http://blog.csdn.net/aiolos1111/article/details/51919795)
3, set layout viewport width is equal to the width of ideal viewport
(Original address: http://www.quirksmode.org/mobile/metaviewport/#link5)
Address: http://blog.csdn.net/aiolos1111/article/details/51919795)

.

Setting width=device-width This rule actually does the following 2 things:
1, the width of the layout viewport is set to the device screen (width in CSS pixel units, that is, the screen's logical pixel width, I note)
(Original address: http://www.quirksmode.org/mobile/metaviewport/#link2)
2, the width of the ideal viewport is set to the width of layout viewport. (Original address: http://www.quirksmode.org/mobile/metaviewport/#link5)

So, by combining these 2 rules, it is known that the function of the label is to make the layout viewport width equal to the width of the screen of the device, and then equal to the ideal viewport, which is the best practice principle for mobile Web pages:

Width of view viewport = width of layout viewport = device width (device-width)

3.1 Two questions

According to the above description, there are two questions to clarify:

3.1.1 If you do not set the META viewport tag

If the meta viewport tag is not set, the default layout viewport width value of the browser on the mobile device is 980px,1024px and so on, which is larger than the width of the screen (the unit PX used in this width is the px in the CSS, It is not the same as the PX that represents the physical pixel of the actual screen.
If you do not set the meta viewport tag, a PC's page will be scaled and fully displayed on the mobile device!

3.1.2 Why use 2 rules of the same function

We should find that the functions of width=device-width and initial-scale=1.0 are basically the same, why should we use them?
We continue to cite the words of the PPK God:


Original address: http://www.quirksmode.org/mobile/metaviewport/

According to what we can get:
Width=device-width compatibility issues on iphone and ipad;
initial-scale=1.0 compatibility issues on IE

So

To set the layout viewport width to the width of the ideal viewport, you can either Setup width=device-width or set initial-scale=1, but each has a small flaw, namely, the iphone, The ipad and IE will not be divided into vertical screen ideal viewport width. Therefore, the most perfect writing should be, both write up, so that initial-scale=1 solve the problem of the iphone, ipad, width=device-width to solve the problem of IE. So the final version of the code on the phone is:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

• 1

3.2 Scaling Factor

A concept of "page initial scaling factor" is mentioned above, and now we explain what the scaling factor is:

First, the formula for the scaling factor is given by the PPK God.

Zoom factor = Ideal Viewport width/visual viewport width
(The width of the ps:visual viewport refers to the width of the viewable area of the browser)

From this formula, we can get a conclusion:

Page scaling is scaled relative to the ideal viewport.
(Original address: http://www.quirksmode.org/mobile/metaviewport/)

Iv. Summary

1, the device pixel is the unit resolution units, the same device's device pixel size fixed unchanged
2, DPR = device pixel/css pixels = device pixel/device independent pixel ~= ppi/160 = page Scaling
2. Visual Viewport width = Ideal viewport width/zoom factor (where the width of the ideal viewport of the same device is fixed, so scaling the page just changes the size of the visual viewport)
3. CSS pixel = device independent pixel = logical pixel
4, the same device's CSS pixel number is unchanged, but the length of each CSS pixel will change, that is, css pixels will stretch
5. The way to scale in modern browsers is to "stretch" pixels: the length of each CSS pixel represents a change, while the total number of pixels is constant. So scaling can cause changes in CSS pixels.
6. When zooming, the dimensions of the visual viewport will change and the dimensions of layout viewport remain unchanged.
7. Layout viewport on mobile devices are large in size equal to the viewable area of their browser (visual viewport)
8.1px in CSS does not represent 1px on device pixels
9, the larger the resolution of mobile devices, the more the 1px in CSS will represent the more physical pixels, the greater the value of Devicepixelratio
10. The width of the ideal viewport is equal to the screen width of the mobile device (this ideal width is the width calculated in CSS pixel units, i.e. the screen's logical pixel width), which is not related to the physical width of the device. The width of the ideal viewport of the same device is fixed.
11, the mobile terminal common operating system and its browser core such as

12, mobile page design size principle: Because DPR is generally 1 or 2, so design the page should be based on the device logic pixel twice times the size of the design
13. End this article with three graphs
A, the mobile page effect when the meta viewport tag is not set

B, set<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0">Post-Mobile page effects

C, set<meta name="viewport" content="width=device-width,initial-scale=1.0">Post-Mobile page effects

Deep understanding of mobile-pixel knowledge and viewport knowledge (RPM)