css - 移动端为什么产生“一像素边框”这个问题？

问题描述

先说下我的想法。 因为retina屏幕的物理像素密度是普通屏幕的2倍。也就是说同样一英寸retina屏幕用两个物理像素去渲染，而普通屏幕只用一个。至此我认为retina屏幕的物理像素它的大小是小于普通屏幕的物理像素大小的！不然数值上相等的retina屏幕和普通屏幕相比的话retina屏幕的面积岂不是普通屏幕的4倍？但现实中iphone并没有比普通手机大啊。所以我觉得retina屏幕的物理像素是比普通屏幕的物理像素小。那么问题来了。既然是这样怎么会产生“一像素边框这个问题呢？”虽然retina屏幕使用两个物理像 素去表示一个css像素，而普通屏幕是用一个物理像素去表示一个css像素，但是retina屏幕的物理 像素的大小是普通的二分之一啊。所以他们应该相等才对啊。可是这个问题确实存在，那只能说明我 的想法是错的。可是我又不知道错那，麻烦大牛们能给我解解惑！

问题解答

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

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