Mobile-side layout: understanding of Viewport viewport

in mobile development, there are some basic concepts that need to be understood clearly to better organize the programming logic. at the time of contact, the zoom of the mobile viewport is confused with the scale of the REM unit, making itself very blindfolded. So make a careful summary of your own understanding.

The adaptation of the mobile side, I understand two points:

The 1th is the zoom configuration of the viewport, which involves the concepts of viewport and pixels. The goal is to match the logical pixels in our CSS style to the physical pixels of the phone terminal, so that the page view fits the phone screen. Although the code is just a statement to solve the problem, but to understand it, you need to understand a lot of concepts. A detailed view of the history of Pixel pixel next document

The 2nd is the use of REM units, so that we only need one piece of code to adapt to most of the different screen phones.

The above two points, although the purpose of the implementation is different, but the principle of using the same method, all use the scaling factor to solve the problem. The first is DPR, and the second is REM.

Adaptive: In the same terminal, the layout of the page can automatically adjust the layout according to the viewport itself, such as the changes in the size of the PC-side browser page, resize events;

Response: The page can automatically adjust the layout based on the different terminal types detected. such as mobile phones, tablets, computers and other different terminals under the response. Media query @media syntax, be familiar with.

One, the viewport

The viewport, literally using conventional thinking, can be understood as the visible area of the human eye. In mobile development, the viewport abstraction is often divided into layout viewports, Visual viewports, and ideal viewports. Why is it so divided? I think it's better to understand the difference between a CSS pixel and a device pixel, which is the difference between a logical pixel and a physical pixel.

in the PC-side development when writing CSS, the size of the elements of the unit is often the PX, that is, the pixel size. From the beginning of contact and learning process, has always been the use of PX, resulting in our thinking to create a formula, always feel that the size of the CSS elements of the measurement of only px.

Another default mindset is that in our CSS code, the PX pixel unit of CSS is the real representation of a pixel, resulting in the advent of a new concept when web development is moving to mobile development, it is very difficult for us to turn around to understand, for example, the understanding of the viewport now to say, The concept of CSS pixels and device pixels involved.

When it comes to remembering, CSS pixels px just represents a unit of measure in a Web page, and can be understood as the same as REM and EM, requiring a reference dimension to determine its actual size. For example, REM refers to the font size of the root byte point to determine its size, and EM refers to the parent element font size to determine its size. The REM and EM references in the mindset are determined by our "absolute unit" pixel px.

Pixel The PX size is defined by the light point (dot) in the relative display hardware, which is often referred to as a physical pixel.

About Pixel Pixel's past life, you can see here: 78768942

Display hardware in the light point (dot) and image resolution in the pixel (Pixel) is easy to confuse the two concepts, display hardware points can be said to be the smallest display unit of hardware devices, and pixels are a point, but also a collection of multiple points.

When the scanner scans the image, each sample point of the scanner corresponds to each pixel of the resulting image, and the DPI value set at the time of the scan (Dots per inch) is equal to the PPI (Pixel per inch) value of the scanned image . At this point the two can be equated. But in many cases, the difference between the two is quite large. For example, an image with a resolution of 1 PPI, output on a 300DPI printer, where each pixel of the image corresponds to the 300x300 point at the time of printing. There are similar problems in the use of computer monitors, such as the 12-inch display of the effective display area of about 200mmx160mm, if the screen light point diameter of 0.31mm, by conversion to see the maximum number of light on the screen is 640 (200÷0.31) x480 (160÷ 0.31), the corresponding resolution is 80DPI. This 80DPI comes in this way: 640dot÷ (200mm÷25.3995mm/inch) ≈80dot/inch or 480dot÷ (160mm÷25.3995mm/inch) ≈80dot/inch.

In this case, the display card display mode can be set to 640x480, then 1 pixel is composed of 1 dot. If the display card display mode is adjusted to 320x200, in the display of a 320x200 image, a pixel will correspond to four light points.

The above explains the use of PX when writing CSS styles on the PC side, regardless of the reason for the adaptation, because the computer factory settings by default are PPI = Display dpi, 1:1 relationship, that is, DPR (devicepixelratio, device pixel ratio = physical pixels (i.e. glow point)/ Logical pixels (px), which is the "best resolution for the display, and the resolution on which our PX pixel scale depends."

There are two kinds of phenomena:

1. We turn down the resolution of the computer screen, there will be a part of the black edge, that is, the display hardware will be part of the light point. The point at which the glow is implemented is also the set resolution, that is, the pixel corresponds to point one by one. So on the pc side, the DPR is 1.

2. We zoom in and out of a picture on the computer side, do we change the pixel size of the image? In fact, the pixel dimensions of the picture's long and wide direction have not changed at least numerically. The computer changes only the number of luminous dots per pixel for each image layout. It's a good idea to scan a picture with the scanner above. Picture magnification 4 (2*2) times, the picture originally a pixel corresponds to a luminous point to become now a pixel corresponding to 2 light points. So pixels can be stretched.

So the phone-side adaptation mentioned later is also achieved by pixel stretching, meaning that a logical pixel corresponds to more light points (physical pixels).

Mobile phone screen at the beginning, the pixel and the light point is also one-to-another, at this time in the mobile phone layout page operation with the PC PC side, directly with the pixel px measurement is good. But the Times is progress, technology is in rapid development, screen resolution is getting higher, that is, the same size of the screen can produce more and more light points, the corresponding pixels of the screen more and more. Especially since Apple used the retina Retina screen in IPONE4. Although the pixel density increases, the page color display quantity is more meticulous. But it bothers the mobile page layout.

Easy to understand, data and unit right when the first time a square centimeter area on the display 10*10=100 pixels, that I css in a font size is set to 10PX (font size to the width of pixels), we see this font on the screen feel good, but now the technology updated, The same 1 square centimeters of area, I can display 100*100=10000 pixels, that if DPR also maintain a 1:1 relationship, the font is still displayed as 10px (10 light points), then we see the font is not become much smaller, The equivalent width and length of the original font is reduced by 10 times times.

For example, Ipone3 and ipone4, the same diagonal 8.9 cm size of the phone screen, ipone3 can display the pixel is 320*480, and ipone4 can display the pixels is 640*960. Twice times more pixel density. The word "100px" is displayed on Ipone3, and 100px is also set on Ipone4, but the font size will appear to be twice times smaller than Ipone3.  

Look at this picture, the cell phone screen is getting taller and higher, is it not on the phone to display the font is getting smaller?

if CSS in the font size of the pixel standard also maintain the original PC-side dpr=1 standard unchanged, it will inevitably lead to such a result. So Apple was the first to change the DPR ratio on the mobile phone side. Because the phone's physical pixels (that is, the light point of the device's display) and the logic pixel units in the CSS world are 1:1, the font size is good for the sensory experience on the phone, including the previous generations of IPONE3. So since the pixel PPI has increased by twice times, the ratio is changed to 2:1. That is, the 2 physical pixels of a mobile screen are equivalent to 1 logical pixels in CCS. So the screen size has not changed is 3.5-inch screen, pixel density increased twice times, but because the pixel units also increased by twice times, so also ensure that the font size has not changed. What we often say here is DPR. It is determined by handset manufacturers based on their mobile phone screen size and pixel PPI, when the phone factory is set up.

Like the font size set above, the manufacturer according to the size of the phone screen size, there will be a most suitable for this screen size page design, so that the entire page just cover the phone screen, the screen will not produce scroll bar, the user visual sense of the best page size. This viewport is what we call the ideal viewport, when the width of the viewport is defined as the device width device-width, the device-width is not the pixel width that the screen resolution refers to, it is an intermediate layer.

So here we can define the viewport:

The area that exactly matches the screen size of the mobile phone is called the ideal viewport ideal layout;

The pages that we use to make the page layout using physical pixels are called layout viewport layouts viewport, according to magnification DPR times.

When the code does not limit the zoom in or zoom out setting, the user can zoom out or zoom in on the browsing page, when the user sees the page content area is called Visual viewport visual viewport.

If the size of each element is to be converted according to the design, then the efficiency is certainly not. That if the reverse thinking, I put the page in the CSS pixel units are all magnified DPR times the proportion of the layout view to write, just corresponding to the design of the unit size, the entire page after the overall proportion of the page will be reduced 1/DPR times, just back to the CCS corresponding to the logical pixel units.

So the JS code in the mobile HTML document often has the following statement:

<meta id= "viewport" name= "viewport" content= "width=device-width; INITIAL-SCALE=1/DPR;   MINIMUM-SCALE=1/DPR; MAXIMUM-SCALE=1/DRP; User-scalable=no; " >

Statement Analysis:

Content= "Width=device-width: Specifies that the page width displayed by the mobile browser exactly matches the width of the ideal viewport. Device-width: The screen width of the device is the ideal viewport width. By phone manufacturers according to the phone resolution and custom DPR calculated, in the phone factory is set up.

INITIAL-SCALE=1/DPR: Since the pixel values we write in the page code are the physical pixel values of the phones in the layout view, we need to reduce the number of 1/DPR times the page is initialized.

MINIMUM-SCALE=1/DPR; MAXIMUM-SCALE=1/DRP; User-scalable=no; "Specifies whether the page under the ideal viewport can be set with maximum zoom, minimum zoom, and allow user zoom. The first two are the maximum and minimum scaling that allows the user to manipulate the visual viewport.

Finally, take this picture to summarize:

iphone phone model	screen size (inch)	pixel size (physical pixels px)	screen pixel density PPI	ideal viewport size (logical pixels px)	zoom DPR
ipone2g/3g/3gs	3.5	320  480	163	480	1
ipone4/4s	3.5	640 960	326	style= font-size:12px	2
ipone5/5s/5c/se	4	640 1136	326	568	2
ipone6/6s/7/8	4.7	750 1334	326	375 667	2
ipone6plus/6s+/7+/8+	style= "font-size:12px" >5.5	1242*2208	401	414*736	3
Iponex	5.8	1125*2346	458	375*812	3

2. G refers to network information Generation S is speed Plus + large screen
4. 1 inch = 2.54cm = 25.4mm
6. Pixels ( Pixel):The short name of the picture element (graphic elements). Each pixel in the computer has a fixed address and is assigned a color by its address. So it can also be understood as the minimum color block for each assigned color on the screen.
8. Screen Size: refers to the length of the display diagonal (diagonal). What we usually call the iPhone5 screen size is 4 inches,iPhone6 screen size is 4.7 inches.
10. Screen resolution: Refers to the number of pixels displayed horizontally and vertically on the screen
12. pixel density PPI:PPI(Pixel per inch by diagonal): represents pixels per inch along the diagonal (Pixel ) Number
14. DPI, the ratio of physical pixels to logical pixels
16. dots indpi (dot) and pixels in the image resolution (Pixel) are two concepts that are easily confused, dpi can be said to be the smallest display unit of a hardware device .
18. in the IPONE4 Apple used the Retina screen technology, not Apple original, is Motorola created, but Apple's first application on the mobile phone, other handset manufacturers have also adopted the technology, making the technology widely used.
20. theoretically, as long as the technology continues to develop, the unit area can increase the number of pixels will be more and more, but the human eye resolution is fixed, as long as the human eye can not feel the granularity of the pixel can be, blindly improve PPI, People's visual senses to the authority will not have a better feeling, the fearless increase in costs. So depending on the screen size, exactly how much PPIis set, Apple has its own Retina calculation formula. So you see, the next few generations of the iphone are almost always on the same PPI .
22. The width of the layout viewport is on the phone and can be obtained by Document.documentElement.clientWidth .
24. After setting the <meta/> tag,thedevice-width value can be obtained by Window.innerwidth device-width value