A, pixel

1. Physical pixels:
A glowing spot on the screen of a mobile phone or computer. It's called physical resolution, or physical pixels. For example: the resolution of iphone6 is 1334*750, that is, there are 750 luminous points in the horizontal direction, and 1334 luminous points in the vertical direction. Different phones have different screen resolution. At development time, physical pixels are not a concern. Of course, the higher the physical pixels, the cleaner the image.Copy the code
2. Logical pixels:
When writing CSS code, the written pixels are called logical pixels. Such as: box {width: 100 px, height: 100 px; }. On the computer side: 1 logical pixel equals 1 physical pixel. But on the mobile end, things are different.Copy the code

Second, the viewport

1. If you put a PC website on a mobile phone, the whole site will be reduced. Why?

A: There are two steps to put the PC site on the mobile:

1) Put the PC website into the virtual container. The width of the virtual container is 980px. The 980 is artificially set, and the phone was set up at the factory. If the entire width of the PC site is 980px, it will fit right into the virtual container. If the width of your computer site is larger than 980px, your site will have a horizontal scroll bar in the virtual container. If the width of your PC's website is less than 980px, the virtual container can also be lowered. 2) The second step is to put the virtual container into the phone. If the phone is 980 width, just put the virtual container down. Unfortunately, the width of the phone is also fixed when it comes out of the factory. For example: iphone6/7/8 width is 375, iphone5 width is 320, iphone6/7/8 Plus width is 414.... Android phones also come out of the factory with a specified width. What if you want to put a 980 virtual container into a 300, 400, 500 phone? A: At this point, the virtual container will be compressed, as will every box on the page. The virtual container above is called the viewport.Copy the code
2. Why is the viewport default size 980?

In the early days, the resolution of computers was low, and when you wrote a PC website, it was 980px. The virtual container was artificially 980px wide so that the 980px website would look good on the phone.

For example, iphone6/7/8 is 375 wide. The iphone5 is 320 wide. Iphone6/7/8 Plus it's 414 wide. 320px, 375px and 414px above refer to the width of the phone (device-independent pixels, not the same as our phone's resolution). In real development, the iphone6 is usually the standard. In development, we focused on the width of the phone.Copy the code
3. Write a box:
For example: 200*200 boxes. On the PC side: logical pixels correspond to physical pixels. On iphone6/7/8 Plus: 1) The box is placed in a virtual container (980px) and then compressed into a 414 phone. On iPhone 6/7/8:1) The box is placed in a virtual container (980px) and then compressed into a 375 phone. On iphone5:1) the box is placed in a virtual container (980px) and then compressed into a 320 phone.Copy the code
The size of the same box is different in different mobile phones.

Q: Is it true that the size of the box displayed on different phones depends on the resolution of the phone? A: No, it depends on the width of the phone, which is called device independent pixels.

Take iphone6 as an example: the resolution is 1334*750. There are 750 luminous points in the horizontal direction and 1334 in the vertical direction. Device independent pixels: 375 x 667. Horizontal: resolution: 750, 750 points of light. Device independent pixel: 375. Pixels are blocks: 1 by 1 pixels. Conclusion: On iphone6, 1 device independent pixel block, finally mapped to the phone, can map 4 light points.Copy the code
5. How to prevent box compression?

A: You can set the width of the virtual container so that the box does not compress in your hand.

For example: 200*200 boxes. Artificially set the width of the virtual container to 414. <meta name="viewport" content="width=414"> <meta name="viewport" content="width=414"> <meta name="viewport" content="width=414">Copy the code

Conclusion: If you don’t want the box to be compressed, you need to set the size of the virtual container. If set to the same width as the phone, the box will not compress on any phone.

Final conclusion: Whenever we write mobile pages, we must set the viewport size.

For example, you can use the meta tag, name=" viewPort "to set the viewport size to the same size as the viewport on the mobile device. <meta charset="utf-8"> <meta name="viewport" The content = "width = device - width, user - scalable = no, initial - scale = 1.0, the maximum - scale = 1.0, minimum - scale = 1.0" > <! <title> <title> <style type="text/ CSS ">Copy the code
6. Zoom

Technically, scaling is the process of making CSS pixels larger or smaller.

A typical example would be to browse a PC website on your mobile phone and zoom in to see the words. However, this scaling affects all elements on the page. For example, an element with a width of 200px takes up 200 CSS pixels, and since those pixels are enlarged, they span more physical pixels, not smaller. CSS pixels are smaller in size, so there are fewer pixels across devices.Copy the code

So, scaling affects the size of the visual viewport. Enlarging the viewport makes it smaller and you see less content because there are fewer CSS pixels on the screen. Zooming out makes the visual orifice bigger and allows you to see more of it. Because there are more CSS pixels on the screen.

So the scale is inversely related to the size of the visual viewport: the larger the scale, the smaller the visual viewport.

7. Viewport properties:
Width: Sets the viewport Width, usually device-width. Initial-scale: Sets the initial scale of the page. Minimum-scale minimum: a minimum value that allows the user to scale the minimum value. The value is a number, which can be a decimal, usually 1. Maximum-scale maximum: indicates the maximum value that the user can scale to. The maximum value is a number, which can be a decimal number, usually 1. User-scalable: Whether to allow users to scale with two fingers. No indicates that no is allowed, and yes indicates that yes is allowed. Height: Sets the height of the viewport. You can set only initial-scale, where width=device-width is equivalent to initial-scale=1.0. Viewport = Set individual pixels (375)/initial-scal.Copy the code
8. There are two ways to set the viewport:
Width initial-scale If both are set, the viewport with a large viewport will be dominant.Copy the code
9. Do not allow the user to zoom, there are two ways:
user-scalable=no
minimum-scale=1,maximum-scale=1
Copy the code

Three, three viewports

On the PC side, the viewport refers to the viewport area of the browser that is the same width as the browser window. In the CSS standard documentation, viewports are also referred to as initial inclusion blocks, which are the root of all CSS percentage width calculations, limiting a maximum width for CSS layouts.

The mobile terminal is more complex, which involves three viewports: Layout Viewport, Visual Viewport and Ideal Viewport.

1. Layout viewport:

On a desktop, the viewport matches the width of the browser window, but on a mobile phone, the viewport doesn’t match the width of the mobile browser screen. Just think, under the small screen of mobile terminal equipment, if the viewport is consistent with the mobile browser screen width, then accounted for 30% of the body of the width of the div on the phone display looks very, very small, so the mobile browser vendors must ensure that even in narrow elements under the screen is very good, so you need to design the width of the viewport is a lot wider than the screen width, This will make the site appear as if it were on a desktop. However, if the site is not optimized for mobile, the browser will make the site as small as possible so that users can see the whole site.

Bottom line: On mobile phones, viewports are irrelevant to screen width, as opposed to desktop screens. We call this viewport a layout viewport.

2. Visual port:

This is the area of the site that the user is looking at, the area of the site (important things three times). Users can zoom to view the content of the site. If the user zooms in on the site, the area we see becomes larger, and so does the visual port. Similarly, if the user zooms in on the site, the area we see becomes smaller, and so does the visual port. No matter how the user scales, it does not affect the width of the layout viewport.

3. Ideal viewport:

By default, a mobile or tablet browser layout is 768-1024 pixels wide. That’s not ideal for a phone’s narrow screen. In other words, the default width of the layout viewport is not an ideal width. So the ideal viewport was introduced.

Use the ideal viewport only if the site is intended for mobile. To add an ideal viewport, add a meta viewport tag to the page, such as:


<meta name="viewport" content="Width =device-width Minimum-scale =1; maximum-scale=1; user-scalable=no Whether users can scale yes or no">
Copy the code

This line tells the browser that the width of the layout viewport should match the desired viewport width. This also shows that defining the ideal viewport is the job of the browser, not the device or operating system. Therefore, different browsers on the same device have different ideal viewports. The size of the ideal viewport for a browser also depends on the device on which it is located.