About resolution

There are usually two kinds of resolution: screen resolution and picture resolution.

Screen resolution refers to the number of pixels on a screen. For example, on my iPhone6sp, the resolution is 1920 x 1080, which means the screen has 1080 pixels horizontally and 1920 pixels vertically.

Image resolution is the same concept, as for clarity, of course, the screen/image of the same size, who has more pixels who is clear.

Device independent pixel DP

The resolution, the cube of pixels, actually exists in the physical world, and we call it a physical pixel.

And device independent pixels, it’s not real, it’s a description of size. To upgrade from a lower-resolution phone to a higher-resolution phone, because the screen size is essentially the same, you need to squeeze in a doubling of pixels without changing the size.

Therefore, we can draw a conclusion: in the low resolution mobile phone 📱, the size of the pixel square is relatively large; On high-resolution phones, pixel squares tend to be smaller in size.

Device-independent pixels, on the other hand, are a kind of description of physical dimensions.

Device pixel ratio

Device pixel ratio, also known as DPR, refers to the ratio of physical pixels to device-independent pixels.

DPR = number of physical pixel squares/device-independent pixels

Like now, every mobile phone is high-definition screen, DPR is 2 start, 3 is also a lot of grasp.

CSS pixel

CSS pixels are the single unit we use most in development, namely PX. Just remember: when the page is scaled at 1, one CSS pixel is equal to one device-specific pixel, and how many device-specific pixels are drawn with pixel squares depends on the device’S DPR.

1 CSS pixel display size = 1 device-specific pixel size x page zoom factor

This formula is ok. Under certain equipment, the device-independent pixel and physical pixel of the device will not change. If the scaling factor is increased from 100% to 200%, it means: 1 CSS pixel display size = 1 device-independent pixel size * 2, which means that when scaled up, a CSS pixel display size now spans two device-independent pixels.

viewport

First of all, let’s make it clear that we often say that there are only three kinds of viewport: layout viewport, visual viewport and ideal viewport.

So what’s the difference between these three viewports? Let’s look at it briefly:

  • Layout viewports. You can think of it as a primordial viewport, which is calledwidthOn the PC it is the same as the browser window, but on the mobile it is given a default value, usually 980px. In short, it is inaccurate. (document.documentElement.clientWidth)
  • Visual viewport. The real area that the user can see, which determines how much the user can see. (window.innerWidth)
  • Ideal viewport. The best size for a web page to display on mobile, also known asdevice-width. (screen.width)

Width =device-width: the width of the layout viewport equals the width of the desired viewport.

In addition, since initial-scale= ideal viewport width/visual viewport width, we set initial-scale=1 to make the visual viewport equal to the ideal viewport width.

Width =device-width,initial-scale=1.0; width=device-width;

1 px problem

Going back to the 1px problem, we know that when the scaling factor is 1, each CSS pixel (PX) corresponds to a device-independent pixel. Then in a double screen (DPR =1), it will use 1 physical pixel to display; On a double screen (DPR =2), it uses 2*2 physical pixels; In a triple screen (DPR =3), the display is 3 by 3 physical pixels.

They should all be about the same size, as shown below:

However, due to the uncertain size of pixels, the size can be large or small, and the pixel spacing problem, generally speaking, two rows of pixels will be wider than one row of pixels visually.

The essence of solving the 1px problem is to make a 1px CSS pixel appear as a physical pixel (i.e. a pixel block) on any screen (with a scale factor of 1).

To achieve this, we need to use the media query to look up the device’s DPR:

/* double screen */ = double screen */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx);
Copy the code

There are three mainstream approaches to deal with this 1PX problem in the market:

  • Use background-image (need to import external resources, do not support border-radius, bad review)
  • Using SVG (no need to import external resources, but also no support for border-radius, bad review)
  • Use fake elements (no need to import external resources, support border-radius, good reviews)

An example of an orthodox processing scheme is as follows:

.retina-border {
  position: relative;
}

.retina-border::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  transform-origin: left top;
  box-sizing: border-box;
  pointer-events: none;
  border-width: 1px;
  border-style: solid;
  border-color: #ff414e;
  border-radius: 10px;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  .retina-border::before {
    width: 200%;
    height: 200%;
    border-radius: 20px;
    transform: scale(0.5); }}@media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 3dppx) {
  .retina-border::before {
    width: 300%;
    height: 300%;
    border-radius: 30px;
    transform: scale(0.33);
  }
Copy the code

But then again, does showing 1px in a row of physical pixels on any screen necessarily look equally wide? Again, the answer is not necessarily. For example, on an ultra-hd 2K screen with a DPR of 4, a row of physical pixels is almost invisible.

At present, the industry is not unified about the 1PX pixel processing scheme. For example, large e-commerce websites like Tmall and Jingdong have not dealt with the 1PX problem on mobile terminals. Vant, which has been praised, uses a compromise scheme. The unified zoom of the mobile terminal is 0.5. No matter how much THE DPR is, it can also ensure the basic unity of the vision and prevent the phenomenon of over-fineness.

So far, visually I think this is the best treatment.