css - Warum erzeugt das mobile Endgerät ein Problem mit der „Ein-Pixel-Grenze“?

Question

Lass mich dir zuerst meine Gedanken sagen.
Weil die physische Pixeldichte des Retina-Bildschirms doppelt so hoch ist wie die eines normalen Bildschirms. Mit anderen Worten: Derselbe 1-Zoll-Retina-Bildschirm verwendet zum Rendern zwei physische Pixel, während ein normaler Bildschirm nur eines verwendet. Bisher denke ich, dass die physische Pixelgröße des Retina-Bildschirms kleiner ist als die physische Pixelgröße des normalen Bildschirms! Wenn ein Retina-Bildschirm numerisch einem normalen Bildschirm entspricht, wäre die Fläche eines Retina-Bildschirms dann nicht viermal so groß wie die eines normalen Bildschirms? Doch in Wirklichkeit ist ein iPhone nicht größer als ein gewöhnliches Mobiltelefon. Also
Ich denke, die physischen Pixel des Retina-Bildschirms sind kleiner als die physischen Pixel des normalen Bildschirms.


Dann kommt die Frage. Da dies der Fall ist, wie kann es zu einem Problem mit einem „Ein-Pixel-Rand“ kommen? Obwohl der Retina-Bildschirm zwei physische Pixel verwendet, um ein CSS-Pixel darzustellen, und der normale Bildschirm ein physisches Pixel verwendet, um ein CSS-Pixel darzustellen, ist die Physik des Retina-Bildschirms
Die Pixelgröße beträgt die Hälfte der normalen Größe. Sie sollten also gleich sein. Aber dieses Problem besteht tatsächlich, was nur bedeutet, dass meine
Idee falsch ist. Aber ich weiß nicht, was ich falsch mache. Könnten Sie mir bitte helfen, es zu klären?

Answer 1

移动端的像素跟屏幕像素并不是相等的，首先跟缩放比例有关，确认是1.0的话，CSS 可以对应 document.body.clientHeight 和 document.body.clientWidth。
1920 x 1200 的屏幕，document.body 可能只有 480 x 662 的尺寸。

Answer 2

直接用rem布局，这个放大倍数，图片会不会模糊