On mobile Web Development (top): in-depth concepts

If you're a front-end engineer working on mobile Web development, you may also have had problems that I've encountered: There are too many new concepts to master, too many similar concepts to differentiate. It doesn't matter, I will use two articles to solve these problems. The previous article on explaining and distinguishing some of the introductory level concepts. These concepts you may have seen or heard on various occasions, as if they were ripe, but do you really understand the meaning behind them? In the next article, we need to use these concepts to talk about picture loading scenarios on mobile devices. As for the responsive design, there have been too many very good articles to describe them, and this time I will not repeat them here.

Let's start with the--ppi of a concept.

　　Ppi

　　What is PPI

The complexity of the PPI is that if the context in which he belongs is different, the meaning will be completely dissimilar. When we talk about the PPI of the display device, it refers to the pixel density of the screen, and when we talk about the picture, we talk about the resolution at the time of printing or the printing accuracy of the printer. Here we mainly describe the former situation, about the latter two, we will talk at the end of the article, interested classmates can read.

The PPI is all called pixel per inch, which translates to a pixel value in pixels, or, more specifically, pixel density, which is a measure of the number of pixels in a unit's physical area.

As shown, the more pixels you have in an area of 1 inches, the greater the density, the higher the PPI value. But what is the actual meaning of pixel density? What does it say? What is the impact of high or low on the device display?

In general, we certainly hope that the higher the PPI value is better, because a higher PPI means that more pixels can be accommodated on a physical screen of the same size, showing more detail of the picture, which means a smoother picture. The principle is as follows:

　　What is pixel

But have you been careful about what kind of pixels does the concept of pixel pixels in pixel Per inch refer to? You might ask me if there's a lot of pixels. I can tell you with certainty, yes.

　　Device pixels

Both the early CRT display and today's LCD display are based on lattice. In other words, the dots are arranged into a large rectangle, and different dots are displayed as images by displaying different colors. For example, the LCD display 6x6 a small dot array of matrices:

Note that each pixel (pixel, also known as DOT) is a combination of three sub-pixels (subpixel) of red, green and blue. When you need to display picture information, it works as shown in the following:

On the left is the pixels we can see after zooming in, and the right side is the display of the corresponding pixel on the display.

Note that only the physical pixels of the LCD display are represented, and the physical pixels of the early CRT display are also made up of separate points. However, there is no concept of subpixel, as shown in the following scenario:

The pixels on these monitors described above are referred to as physical pixels (physical pixel) or device pixel.

　　CSS pixels

As Web developers, we touch more of the style unit pixels that are used to control element styles. Here the pixels we call css pixels.

What is the special place for CSS pixels? We can borrow this example from the Quirksmode:

Suppose we use a PC browser to open a page, the browser at this time the width of 800px, the page also has a 400px wide block-level element container. It is obvious that the block container should occupy half of the page at this time.

But if we enlarge the page (with the "Ctrl key" plus the "+ key"), Zoom to 200%, which is twice times the original. At this point the block container fills the entire browser horizontally.

Paradoxically, we did not resize the browser window or change the CSS width of the block element, but it looked a little bigger--because we zoomed the CSS pixel up to twice times the original.

CSS pixels are the same size as screen pixels 1:1:

CSS pixels (black border) begin to stretch, at which point 1 css pixels are larger than 1 screen pixels

This means that by default a CSS pixel should be equal to the width of a physical pixel, but the browser's magnification allows a CSS pixel to be equal to two device pixel widths. You'll see more complicated situations in the back, where CSS pixels are equivalent to the size of multiple physical pixels, even in the default state, on high-PPI devices.

From the above example I would like to pass a very important concept, that is, CSS pixels are always a relative value.

　　Correct answer

Back to the PPI, now we have two pixels, device pixels and css pixels. So what is the pixel in the PPI?

Keep in mind thatpixel in the PPI refers to the physical pixels .

　　but in Wikipedia's interpretation of the PPI, Pixel is interpreted as a pixel similar to resolution:

The apparent PPI of a monitor depends upon the screen resolution (which is, the number of pixels) and the size of the scree n in use; A monitor in 800x600 mode have a lower PPI than does the same monitor in a 1024x768 or 1280x960 mode.

The above paragraph is said that the same size of the display in 800x600 resolution and the pixel density of 1024x768 is obviously different, the latter is obviously more pixels per area, of course, the latter pixel density is higher.

Here's another scenario in which the display's pixel density is different due to resolution adjustments on the same monitor. Although the pixels here are not displayed in the browser, the principle is similar to CSS pixels, that is, multiple physical pixels make up a pixel at a specified resolution.

　　But the problem is that this comparison is meaningless, we usually compare the PPI, must be in the cross-device comparison, in order to reflect the technical advantages of the equipment, but also to take the device's optimal or limit conditions for comparison, so that the resolution of the pixel is the physical pixel one by one matches. Can't say a 23-inch 2k monitor and a 23-inch 1080p monitor because they can adjust to the 1440x960 resolution, then their PPI is the same? The PPI is the parameter that embodies the performance of the equipment in the end.

That is, when we talk about the PPI of a device, it is a fixed value and is a constant parameter.

So how does the PPI calculate? Yes, just like you think, by dividing the physical pixels of the screen by the physical size, take the example of Samsung Galaxy S4:

This shows that the Galaxy S4 has a screen resolution of 441PPI.

　　The Bad and the Ugly

But the high PPI will also cause problems, the same picture material, the higher the device will show the smaller. The following is the visibility of a pixel on different PPI devices, with the increase in visibility of the PPI increasing:

So one thing that can be expected to happen is that the same size screen assumes that the PPI has increased by a factor of one, and it's likely that the program interface is reduced by 4 times times (because the size of the physical pixel is 1/4 when the screen size is constant).

In Surface Pro 3, for example, the default resolution is 2160x1440, which means that the physical pixel of the screen on surface has 2160x1440 points, and at the default resolution, a point physical pixel point corresponds to a resolution pixel. But because the screen is only 12 inch, pixel density is very high, so there is the above problem, each text and icon is too small, the computer is completely unavailable.

The workaround is that Windows by default magnifies all text and footage (in fact, the resolution pixels) by 1.5 times times (set in screen resolution-zoom in or out of text and other items), which is a physical pixel that corresponds to a pixel at a resolution, Now the 1.5 physical pixels corresponding to a resolution of pixels, it means that the resolution of the pixel is larger, the actual resolution is reduced, has become 1440 (2160/1.5) x900 (1440/1.5) (at this time if you try to use Window.screen.width /window.screen.height to detect the return result will also be 1440x900). Here's a question for the reader, so what's the difference between adjusting the PC's resolution to 1440x900 directly?

But to enlarge the material and text is really once and for all? No, it even brings side effects. Zooming in on the footage is a very dangerous thing to do with bitmaps. Suppose a piece of material in a software has a resolution of 32x32, but in order to fit the overall interface stretch, it must also be stretched to the original 1.5 times times equal to 48x48. You must have experience in Photoshop to force the image to zoom in to the original effect several times. In this way, the image material becomes blurred. And because window uses a bitmap font instead of a vector font, the fonts in the software become blurred.

To put it simply, using this technique requires that the 32x32 image be forced to 48x48, and how much of the extra pixels are generated out of thin air. The computer only guesses, through the linear interpolation algorithm. So the picture will appear blurry.

But the problem with the bitmap may be stretched is not absolute, assuming the software needs to display the icon size of 32x32, but the picture footage size is 64x64, So even if the UI interface of Windows stretches 1.5 times times, the icon size is 48x48, because the original picture is large enough, the picture is still in the non-stretched state. Then it will not blur.

In turn, we can conclude that in order to show the same effect on low PPI and high PPI slices, the image footage should be as high-definition as possible.

Apple's Retina technology uses the same scenario as above. Take the 15.4 "Retina version of MacBook Pro for example. The physical pixel point of the display is actually 2880x1880, but the default optimal resolution is only 1440x900, which is just half the physical pixels. This means that the operating system uses 4:1 scaling by default. But there is also the possibility of using software virtualization.

I don't know how to solve this problem in Mac software development, but I can refer to the solution in iphone development, Apple encourages developers to prepare two pieces of material, normal and high-definition material. and by the material filename suffix to distinguish, such as ordinary material name is Apple.png, then the HD material name is [email protected]. Natural HD material is four times times the area of ordinary material, the system will prefer to use high-definition material, but automatically reduced to the size of ordinary material, so there is no picture stretching problem.

　　PPI on the web

From the above we know that because the UI under the high pixel density device is scaled at a certain scale, CSS pixels also face the same problem:

As shown in the left normal screen, 2x2 css pixels really only need 2x2 physical pixels. But in the right HD screen, 2x2 css pixels require a 4x4 of physical pixels.

I just said that one of the ways to solve the problem of high-definition PPI chip rendering is to use more HD image footage. But the question is how much HD do we need?

On the retina display, according to the principle described in the previous section, when we need to render a 32x32 image, we actually need to prepare 64x64 footage. Because Apple by default, all the material is twice times the magnification. But if there is a more high-definition device, three times times or four times times or higher multiples, do we need to prepare more size or larger volume of document material? We are facing this problem in web development.

First we have to learn how to express and judge such a CSS pixel and physical pixel inequality.

　　Devicepixelratio

Devicepixelratio is defined as follows:

window.devicepixelratio = physical Pixels/dips

The denominator dips is all called device-independent pixels, and is translated into device-independent pixels . More commonly, it should be a CSS pixel independent of the physical pixels.

Take IPhone4 as an example, the physical pixel width of the phone is 640px in the vertical state, but since the 2:1 scaling relationship, at this point the dip, the device reports to us the width is only 320px. The devicepixelratio at this time is 640/320 = 2;

Devicepixelratio is the physical pixel of the phone and the actual use of the pixel scaling ratio.

Note Devicepixelratio is not a default value. By default, CSS pixels are determined by the phone's default zoom. But also because the browser page can be artificially scaled. For example, the default resolution width in IPhon4 is 320px. When we browse the Web we can zoom in twice times to 160px. So Window.devicepixelratio has gone sour 640/160 = 4.

　　Dppx

A concept that is almost equivalent to Divicepixelratio when dppx:dots per pixel. Represents the number of physical pixels occupied by a single CSS pixel. Think carefully, this and devicepixelratio actually is a meaning, iPhone4 dppx is 2, is not with devicepixelratio just equal. Devicepixelratio is a macroscopic aspect of this matter. Calculate the overall width. DPPX is a microscopic view of this matter, considering the comparison between individual pixels.

　　Dpi

Keep in mind that when we talk about the pixel density of a display device, the DPI is equivalent to the PPI. Dots in dots per pixel are referred to as physical pixels.

But if you're using DPI in Mediaquery, you should be aware that Chrome will prompt you to use DPPX instead of DPI in the console:

Consider using ' dppx ' units instead of ' dpi ', as in CSS ' dpi ' means dots-per-css-inch, not dots-per-physical-inch, so does not correspond to the actual ' dpi ' of a screen. In media query expression:only screens and (-webkit-min-device-pixel-ratio:2), not all, no, only screens and (min-res OLUTION:192DPI), only screen and (MIN-RESOLUTION:2DPPX)

The above phrase means one inch of the CSS definition in mediaquery, rather than an inch of physical definition in life.

To be honest, I didn't find a definition of one inch of CSS, but in the definition of resolution, we can see that the 1dppx defined by it has the same meaning as 96dpi. So 2dppx is 192dpi. This is certainly out of our traditional dpi, Surface Pro 3 dpi (that is, PPI) can reach 216ppi, but the default does not enlarge the interface when the DPPX can still be 1.

　　CSS Reference Pixel

This is a very small concept for individuals, but it is precisely because there are too few people to know, it is worth mentioning.

Suppose we specify that the CSS pixel values need to be equal to the device pixel size, but when the handheld device is different from the person's distance, the device pixel density is different, Will cause a change in the visible size of the CSS pixels on the device we see (similar to the huge moon because the distance from the Earth is not as large as a coin in human eyes). To ensure consistency in the size of the CSS pixels observed on different devices and at different distances. The concept of a CSS relative pixel (CSS reference pixel) is defined by the consortium.

It is recommended that the reference pixel being the visual angle of one pixel on a device with a pixel density of 96dpi and A distance from the reader of the arm ' s length. For a nominal arm's length of inches, the visual angle is therefore about 0.0213 degrees.

The World wide rules of the world, the human eye can be identified, distance oneself an arm length (about 28 inches), pixel density of 96dpi devices on a physical pixel set as the reference pixel. So we can figure out how the eye sees the angle of view of the reference pixel at 0.0213 degrees:

With this series of references, through trigonometric functions, we can work out the ideal size of css pixels for the same device at different distances. The pixels should increase when away from the observer, and the pixels should be reduced when near the viewer:

The advantage of this is that regardless of the distance the device is from the observer, and regardless of the pixel density and physical pixel size of the device, the CSS pixels seen by the observer are consistent, guaranteeing the consistency of the user experience:

But the question is how to practice this standard?

<meta name= "viewport" >

We have physical pixels, css pixels--so the question is, when you open a page with a browser on your phone, which width should the page be rendered in?

First of all we need to understand a concept: viewport, I often see the Chinese translated into the viewport, but personally think this translation is somewhat obscure. Viewport is used to restrict HTML elements-the word "restriction" is not so well understood. There is an article on Quirksmode that speaks of this concept with a very figurative analogy:

Let's say that the body tag has a block element width of 10%: div {width:10%;} We know that when we zoom the browser, the width of the block element changes as well. This is because its width accounts for 10% of its parent element. So, whose parent element, or the width of the body element, is determined by whom?

We know that the default width of a block element is 100% of its parent element, that is, the width of the BODY element is the same as the width of the HTML element that wraps it. So the question becomes, who decides the width of the HTML element?

The answer is the browser window. Now we can sum up that HTML elements are restricted by the browser and wrapped up. The width of the HTML is the width of the browser.

In fact, the width of the HTML element is 100% of the viewport, while in the desktop browser The viewport is exactly the same size as the browser window (note that this is only on the desktop browser).

OK, so we got a conclusion that the HTML width is determined by viewport, but in the desktop browser, the viewport size is equal to the size of the browser window.

But this set of rules cannot be executed on a mobile phone. The screen resolution of most mobile phones is only 400px, if there is really a page element on the page is only 10%, that is, 40px, the naked eye is almost indistinguishable. The actual situation should be worse, IPhone4 Safari by default is to render the Web page in 980px. If you access StackOverflow in Chrome on a desktop basis, the result would be this:

The experience is very bad, and all the links are almost impossible to click accurately. So how to solve this problem?

The first way to enlarge the page.

We'll be accustomed to using gestures to enlarge the page. But note that what we're doing here is just zooming in on the page, changing the scale of the page, and the effect is similar to the browser on the PC. However, the layout of the page is not changed, and the layout used to render the page is still 980px

A second option is to change the layout.

For example, on the following page there is a 320px wide picture, if we use the default 980px to render, it will appear too narrow:

But if we could set the layout of the render to 320px, it would look much better, and we would not be scaling the page at this point:

Of course, you can also combine the previous step to scale the page:

More than just zooming in, even in 320px pixels, we can zoom out:

Back to the technology, these can be solved by viewport tags, such as the above requirements, the layout is set to 320px, while 1.5 times times the scale:

<meta name= "viewport" content= "width=320, initial-scale=1.5" >

WYSIWYG, the attributes you need to set are separated by commas in the content, width representing the page layout width, the initial-scale scale of the initial state of the page, and if you do not want the user to scale, you can also add user-scalable=no fields to ensure that the user cannot zoom in.

What's more, we can also width=device-width make better use of responsive design by setting the layout width equal to the cell phone resolution width (but we don't have to care about what the cell phone distinguishes the width of) without specifying a specific width. Note that this device-width represents the resolution width of the phone, not the cell phone's physical pixel width. IPhone4 in the vertical state the physical pixel width is 640, here the device-width representative should be its dip pixel 320px.

Add a viewport tag to width=device-width a situation where you face multiple resolutions when you're developing responsive web pages for mobile devices, but you don't have to use heavyweight mediaquery, and to prevent your phone browser from using the desktop resolution width to render pages, It can also be compatible with the phone's horizontal or vertical grip. This allows your responsive page to work with most mobile devices.

Write here we can make a summary, what is the role of viewport tag? It allows you to put aside the distractions of the device and tell the device what width you want to render the page. Let it obey you, not your orders.

The above we talked about viewport has a semi-professional noun became layout viewport, although it is an unofficial word, but a lot of articles are quoted this concept. Layout viewport is dedicated to page rendering control. There is also a viewport called visual viewport that can be translated into visual windows. The distinction between the two types of viewport is as follows:

From this you can see that visual viewport is like a window to browse the Web page is the view of the window. Of course, we will also meet the layout viewport and visual viewport size equal case. For example, like this:

That's what I've described above width=device-width .

　　External: More scenarios for PPI and DPI usage

At the beginning of the article I have said that the PPI is different in different contexts, if you still have curiosity, you can continue to read. Next we talk about the meaning of PPI outside of the web.

First of all we want to reiterate the above conclusion, talk about the pixel density of the display device, PPI and DPI and the same concept, and the pixel pixel and dot dots refers to the physical pixels.

If you look at the properties of a JPG image, you will find that there are horizontal or vertical dpi-based properties or when you create a new document in Phototshop, you fill in the attribute value in PPI:

There are also areas where mixing and confusion exist. In fact, they all indicate the resolution value at the time of printing. pixels per inch at print time (that is, close to the PPI, but we use DPI more often). The inches here are no longer screen pixels, but paper sizes.

What does the PPI or dpi mean for a picture? Exactly what doesn't mean. A picture is just a data file in the camera or hard drive, can you tell me how many inches or inches it is? Only when it is printed out will it involve the size of the print medium and dpi makes sense. If you want to enrich the picture, the only way is to increase the image of the pixel, improve your shooting skills.

Of course there is no concept of pixels on paper. But we can go to the abstract to imagine it. Suppose you have a picture of 300x300 pixels. The print resolution is 30DPI, then the last print size is 10x10 inches. If the DPI value at the time of printing is 300DPI, then the printed size is 1x1 inches. So we can think of DPI as a means of adjusting the size of the print.

So the higher the DPI value, the smaller the picture is, the clearer it is. Of course, that's not true. If you're 60 centimeters away, watch a 194DPI printed picture. You will not be able to tell whether it is 194DPI or 300DPI. Because the resolution of the human eye is limited. This is also common to display devices. The pixel density of the iPhon4 is 326DPI, and the pixel density of the New ipad is only worse than the 264dpi,new ipad display? Refer to the distance and the way that most people use, actually the effect that the eye obtains actually is not very big difference. This is why large monitors or outdoor advertising dpi are not very high, because we watch them when the distance is far, the effect is not too bad.

Finally, we can look at the dpi of another scene: Describe the printer's print resolution:

When a picture on a monitor is printed on a picture, the concept of pixels is actually what we imagine, and the more practical concept is every "dot" of a printing device:

When you try to use a magnifying glass to view a picture of a color printed item, the result you see from small to large should be this:

Why is that? In short, the printing principle is through the halftone (halftone) technology, through the control of the CMYK four color point printing when the size of each printing point, angle, gap to simulate the feeling of a color:

For example, when you print a 150PPI picture in 600DPI, each pixel should contain 16 dots (600dots/150pixels = 4).

From the above we know that the PPI can determine the size of the physical size of printed matter, the DPI parameters of the printer can further determine the quality of the printed matter. We are used to both in pursuit of higher DPI and PPI.

150DPI is usually considered to be a high-quality print resolution. The resolution used by newspapers is usually 85dpi. Outdoor billboards are usually used in 45dpi. But you don't think their print quality is too bad because of the distance.

　　End

In this article I have done some of the concepts that may be involved in mobile development. In the next article I will apply these concepts and summarize the picture loading scenarios on mobile devices.

On mobile Web Development (top): in-depth concepts