css - モバイル端末で「1 ピクセルの境界線」の問題が発生するのはなぜですか?

Question

まず私の考えを言わせてください。
Retina スクリーンの物理ピクセル密度は通常のスクリーンの 2 倍であるためです。言い換えれば、同じ 1 インチ Retina スクリーンはレンダリングに 2 つの物理ピクセルを使用しますが、通常のスクリーンは 1 つだけを使用します。今のところ、Retina スクリーンの物理ピクセル サイズは、通常のスクリーンの物理ピクセル サイズよりも小さいと思います。そうでない場合、網膜スクリーンが数値的に通常のスクリーンと同等である場合、網膜スクリーンの面積は通常のスクリーンの4倍ではないでしょうか?しかし実際には、iPhone は通常の携帯電話と同じくらいの大きさです。つまり、
Retina スクリーンの物理ピクセルは、通常のスクリーンの物理ピクセルよりも小さいと思います。


そして、質問が来ます。このような場合、「1 ピクセルの境界線」の問題がどのように発生するのでしょうか? Retina スクリーンでは 2 つの物理ピクセルを使用して CSS ピクセルを表現し、通常のスクリーンでは 1 つの物理ピクセルを使用して CSS ピクセルを表現します。 Retinaスクリーンの
ピクセルサイズは通常の半分です。したがって、それらは等しいはずです。しかし、この問題は実際に存在しており、それは私の
の考えが間違っていることを意味するだけです。しかし、私が何を間違っているのか分かりません。説明していただけませんか。

Answer 1

モバイル側のピクセルが画面のピクセルと一致しない まず、拡大率が1.0であることが確認できれば、CSSはdocument.body.clientHeightとdocument.body.clientWidthに対応できます。 。
1920 x 1200 の画面の場合、document.body は 480 x 662 のみになります。

Answer 2

この倍率でレムレイアウトを直接使用すると、画像がぼやけます