This article summarizes physical pixels, pixel density, resolution, CSS pixels, device pixel ratio, double image, layout viewport, visual viewport, ideal viewport, meta.
First, let's talk about the most basic physical pixels.
Physical pixels (device pixels)
Physical pixels are real pixels. One of the smallest physical components in a display device, that is, the smallest particles that can be displayed on the screen. On the same device, its physical pixels are fixed, that is, the resolution of a device is fixed. .
The so-called double screen and double screen refer to how many physical pixels the device displays a CSS pixel, and the more physical pixels to display a css pixel, the higher its clarity.
The real physical pixels of the screen can be obtained by the following code
window.screen.width //获得屏幕水平方向上的像素数
window.screen.height //获得屏幕垂直方向上的像素数
Resolution: Measured in pixels, it represents the number of pixels in the horizontal and vertical directions of the screen. The higher the resolution, the more the number of pixels, and the more precise the sensed image
In web development, you can use px (pixels), em, pt (points), in (inches), cm (centimeters), etc. as the unit of length. We can divide the above units into relative length units and absolute length units.
- Relative length unit: px, em
- Absolute length unit: in, cm, pt
It can be seen from the figure below that the screens are 3.5 inches, but the screen resolution is doubled. We can see that inches are absolute lengths, pixels are a relative length, and pixels do not have a fixed length.
Therefore, we draw The concept of pixel density
Pixel density
At first, pixel density DPI was used in the printing industry to indicate the number of ink dots that the printer can eject per inch. Now the computer draws on its concept, and the smallest unit is pixels. PPI value can be used to express the number of pixels per inch of the screen We can intuitively see the difference in the number of physical pixels in the case of one inch from the following figure.
From this we can see that the higher the pixel density, the greater the number of pixels that can be accommodated in a unit size, and the clearer the displayed picture.
And we often say Retina screen (Retina), know that it has a higher PPI (greater than 320) screen
So how to calculate the pixel density?
Formula:
For example:
The screen resolution of iPhone3G / S is 480 320px, and the screen resolution of iPhone4 / S is 960 480px, the screen size is 3.5 inches, then we can calculate by the Pythagorean theorem:
as can be seen from the above figure, The pixel density of iPhone4 / S is twice that of iPhone3G / S
So far we understand the impact of pixel density on the clarity of the display, but there is another problem. The coexistence of low-resolution and high-resolution devices will cause a problem. For the same picture, low-pixel can fill the entire area , High pixels cannot be filled. Here we need to introduce a new unit called device independent pixels
CSS pixels
Also known as device-independent pixels, logical pixels, device-independent pixels, IOS calls it PT, Android calls it DIP or DP. By default, it is equal to a physical pixel on the PC side. Through the browser's zoom, it will appear greater than or less than or equal to Three situations
Device Pixel Ratio (DPR)
The ratio of physical pixels to logical pixels of a device: device pixel ratio (dpr) = physical pixels (dp) / device independent pixels (dip)
Can be obtained by the following code, the ratio of physical pixels on the device to device independent pixels
window.devicePixelRatio
On an iPhone with a Retina screen, the value of devicePixelRatio is 2, which means that 1 css pixel is equivalent to 2 physical pixels. Generally speaking, the dpr of the double screen (retina) is 2, and the triple screen is 3.
The corresponding processing can be performed by obtaining the ratio. That is, you can enlarge the picture to the corresponding ratio by obtaining the corresponding ratio
However, this raises another problem. Enlarging the picture will reduce the accuracy.
Therefore, we introduce the concept of double image , which can be reduced by double image or triple image to maintain its accuracy.
After watching the pixel part, let's take a look at the most important viewport on the mobile side
Viewport
The size of the viewport on the PC side depends on the size of the browser. In CSS pixels, the size of the
html element can be obtained by the following code, that is, the width and height of the viewport on the PC side:
document.documentElement.clientWidth
document.documentElement.clientHeight
Tip: If you adjust the width of the browser, the width and height of the viewport will change accordingly
The concept of viewport is more applied to mobile
(1) layout viewport (layout viewport)
Refers to the size of the webpage layout area that we can use CSS pixels as the unit of measurement. Mobile devices will set a larger viewport by default (such as IOS generally defaults to 980px), and the width of the layout viewport is larger than the width of the browser's viewable area.
The width of the layout viewport can be obtained by document.documentElement.clientWidth.
document.documentElement.clientWidth
document.documentElement.clientHeight
(2) visual viewport (visual viewport)
That is, the pixel resolution of the device. Taking iphone8 as an example,
the width of the visual viewport with a resolution of 750 * 1334 pixels can be obtained through window.innerWidth.
window.innerWidth
window.innerHeight
Here is a brief look at the difference between layout viewport and visual viewport:
(3) ideal viewport (ideal viewport)
Ideal viewport is a viewport that can be perfectly adapted to mobile devices. Regardless of the density screen and resolution, the displayed size is almost the same. Ideal viewport does not have a fixed size, different devices have different ideal viewport. The ideal viewport is the same as the width of the device, for example, the ideal viewport of iphone8 is 375px
The meaning of ideal viewport is that no matter what resolution screen, the website designed for ideal viewport can be perfectly presented to users without zooming and horizontal scrolling.
window.screen.width
window.screen.Height
Flip screen
When you flip the screen of your phone:
If the width of the visual viewport> the width of the layout viewport, then the viewport needs to zoom in (zoom in, zoom in) to fit the width of the visual viewport
If the width of the visual viewport <the width of the layout viewport, then the viewport needs to zoom out (zoom out, zoom out) to fit the width of the visual viewport
<meta name="viewport" content="width:device-width">
device-width takes the mobile phone's horizontal physical pixel / conversion system as its value, and resets the corresponding layout viewport value, and adapts to the visual viewport.
The role of meta tags
Use meta tags to control the viewport
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
In Apple's specification, meta viewport has 6 attributes as follows:
| parameter | meaning |
|---|---|
| width | Set the width of the layout viewport to a positive integer or the string "width-device", generally the string "width-device" |
| initial-scale | Set the initial zoom value of the page, as a number, with decimals, generally 1.0 |
| minimum-scale | The minimum zoom value allowed by the user is a number, which can take decimals, generally 1.0 |
| maximum-scale | The maximum zoom value allowed by the user is a number, which can take decimals, generally 1.0 |
| user-scalable | Whether to allow users to zoom, the value is "no" or "yes", no or 0 means not allowed, yes or 0 means allowed |
| height | Set the height of the layout viewport, this attribute is not important to us, rarely used |
Because initial-scale = ideal viewport / layout viewport is equivalent to setting width = device-wdith, but in order to solve some compatibility issues such as iphone, ipad and IE will be horizontal and vertical screen, will choose to write both attributes
Final summary
Physical pixels are real, but there is no fixed length. Under the same screen size, the more physical pixels on the screen, the clearer the picture, that is, the higher the pixel density , the clearer the picture; in
order to solve the different screen resolution The size of the picture caused by the problem is different, and CSS pixels are introduced . From this, the ratio of the device pixel ratio is calculated , that is, the relationship between the physical pixels and the CSS pixels. Physical pixels, then we will use the double image and reduce it to double to ensure the accuracy and size of the image.
Viewports are divided into three layout viewports , visual viewports , and ideal viewports . Deal viewport is a viewport that can be perfectly adapted to mobile devices.
The recommended way to write meta tags :
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
Reference material for this article:
https://www.cnblogs.com/jianxian/p/11178378.html
https://blog.csdn.net/zhouziyu2011/article/details/60570547
https://www.cnblogs.com/ 2050 / p / 3877280.html
https://blog.csdn.net/weixin_34348174/article/details/87962105
https://segmentfault.com/a/1190000006068808
https://segmentfault.com/a/1190000011586301
Like it if it's useful!
