css - Why does the mobile terminal produce a "one-pixel border" problem?

Question

Let me tell you my thoughts first.
Because the physical pixel density of the retina screen is 2 times that of the ordinary screen. In other words, the same one-inch retina screen
uses two physical pixels to render, while an ordinary screen only uses one. So far I think the physical pixel size of the retina screen is smaller than the physical pixel size of the ordinary screen! Otherwise, if a retina screen is numerically equivalent to an ordinary screen, wouldn't the area of ​​the retina screen be 4 times that of an ordinary screen? But in reality, an iPhone is no bigger than an ordinary mobile phone. So
I think the physical pixels of the retina screen are smaller than the physical pixels of the ordinary screen.


Then the question comes. Since this is the case, how can there be a problem of "one-pixel border?" Although the retina screen uses two physical pixels to represent a css pixel, while the ordinary screen uses one physical pixel to represent a css pixel, the retina screen The physical
pixel size is half the normal size. So they should be equal. But this problem does exist, which only means that my
idea is wrong. But I don’t know what I’m doing wrong. Could you please help me clarify it?

Answer 1

The pixels on the mobile side are not equal to the screen pixels. First of all, it is related to the scaling ratio. If it is confirmed to be 1.0, CSS can correspond to document.body.clientHeight and document.body.clientWidth.
For a 1920 x 1200 screen, document.body may only be 480 x 662.

Answer 2

Use rem layout directly. With this magnification, will the picture be blurred