CSS像素、物理像素、逻辑像素、设备像素比、PPI、Viewport about blog HOT 20 OPEN

@nicewahson @fattypiggy
既然作者没有回复，我也来试着答答。先看第一个问题：
先明确一个概念，一个css像素(css pixel)的值实际上就是最接近参考像素(reference pixel)的整数个设备像素(device pixels)的值。由定义可知，css像素只和参考像素的大小相关，而参考像素的值只和设备的典型观看距离相关，和分辨率等其他因素无关，关于这点可参考w3c中关于px的定义

所以对于同一个屏幕来说，它的参考像素大小是不变的。那大家可能就有疑惑了，既然参考像素大小不变，那它的css像素大小岂不是也不变？

答案是非也，仔细看上面关于css pixel的定义，能够发现css pixel的基准组成是设备像素(device pixel)，只不过可能不是一个设备像素。到底需要几个设备像素（一定是整数个，不会出现小数的情况），就要看参考像素(reference pixel)的大小了。

知道了上述概念之后，我们再来解答关于同一显示器分辨率提升之后，内容变小的问题就变得非常容易了。以一个典型的1680 * 1050，22英寸的显示器来举例,对于显示器来说，它的参考像素对应的大小约为0.26mm：
（1）当是正常分辨率，即1680 * 1050，它的ppi是90.05，那它一个device pixel的长度就是0.28mm，这时一个device pixel就约等于一个参考像素对应的大小。即1个css像素就等于1个设备像素大小了。如果你用css定义了一个盒子宽为375px，此时你用尺子去屏幕上量，会发现375px盒子的实际宽度是0.28(mm) * 375 = 10.5cm。（这里包括下面都是约等于）
(2) 调整显示器的分辨率为1024 * 640时，此时它一个device pixel对应的长度是0.46mm，虽然它和参考像素对应的大小有差距，但是没办法，你还得使用它，毕竟它现在就是最接近参考像素大小的device pixel了。上面那个375px的盒子，此时的实际宽度则为0.46 * 375 = 17.4cm。所以降低分辨率之后，相同的内容会显得大了。
(3) 调整显示器的分辨率为1920 * 1080，此时它的一个device pixel对应的长度是0.25，此时375px的盒子实际宽度是0.25 * 375 = 9.3cm，所以提高分辨率后，内容自然就变小了。

from blog.

好多图片丢失了

from blog.

@lawpachi 非Retina和Retina的css 1px在屏幕上的物理尺寸确实相同，但是retina下的 css 1px和设计师想要的1px是不一样的,具体可以看这篇文章 https://div.io/topic/1092

from blog.

@xiongzixiao 可不可以理解为PC端，分辨率变大了，像素多了，原来的一像素对应新的小像素变小了，所以内容变小了。而Retina屏幕把2x2个像素当1个像素使用（p6）所以大小不变。

from blog.

260df186b15db38a 2017-06-05 00:30:30

未使用 邀请
cbae4d64abff03bd 2017-06-05 00:30:30

未使用 邀请

1024邀请码，有缘人得😄，这个搬运的笔记就不分享到社区了，仅仅watch的人会看到，应该一时半会没人会注册。

from blog.

唉
早上来注册已经被使用了 @jawil

from blog.

很关键的一篇文章，可惜的是码早就被用了~

from blog.

看完了表示还是不能理解。有几个问题，大佬能不能解释一下
1.为什么同一个显示器高分辨率时候内容会变小
2.如果一张在普通显示器上显示正常的图片，在retina上大小会怎么变啊
3.还有啊，分辨率越高，图片应该是越模糊吧，按文中的理解怎么是越清晰呢

from blog.

@nicewahson 同求大佬回答标准答案。
说说自己拙见：
1.分辨率高了，可以显示的物理像素多了（还是密了？）所以文字会缩小；
2.retina上会变小
3.分辨率越高会越清晰，不是会模糊。还有分辨率有的时候也是需要参考的，同为retina屏的iPad Air 2 PPI只有200多，但是也是retina屏，因为好像Jobs说看iPad的距离和iPhone距离不同，并不是必须大于300。

from blog.

请教作者，为什么会出现一像素边框的问题，就像你说的邮件列表界面，因为Retina屏幕把2x2个像素当1个像素使用。比如原本44像素高的顶部导航栏，在Retina屏上用了88个像素的高度来显示。

所以我css的1px虽然在Retina用2dp。但是一个dp相当于非Retina得二分一dp啊。所以应该1px在任何屏幕下的宽度其实是一样的，那么为什么会出现Retina的一像素边框问题？

from blog.

@xiongzixiao 非Retina和Retina的css 1px在屏幕上的物理尺寸确实相同,那为什么字体在手机上显示变小了呢。

from blog.

1.4里“也就是说默认情况下一个CSS像素应该是等于一个物理像素的宽度的，”。。错了吧？？默认情况下一个css像素应该等于一个dip。。。

from blog.

文中关于使用 meta 标签指定 viewport 宽度时有一处错误：“让viewport的宽度等于设备的宽度，这个应该是大家都想要的效果，如果你不这样的设定的话，那就会使用那个比屏幕宽的默认viewport，也就是说会出现横向滚动条”。应该是默认 viewport 才不会出现横向滚动条，指定 viewport 为设备宽度才会出现横向滚动条

1. 如下图为未设置 viewport
   

2.如下图为设置 viewport 为设备宽度

from blog.

“ 工作时显卡渲染出的2880x1880个像素每四个一组”，应该是2880x1800

from blog.

看完还有几个问题：

1. (图片逻辑像素大小px1) / (图片缩放后实际像素大小px2) = (设备像素dp) / (设备独立像素dips)
   px2 = px1 * (dp / dips)
   px2 = px1 * dpr
   这里的换算有错误吧，应该是 px2 = px1/dpr，怎么会是px1*dpr呢？
2. 上文说1参考像素规定角度来度量的，怎么在下文的时候又成了以长度来度量呢？文章最后
   部分的计算真的搞不懂呀😭，是我太笨了吗~
   望楼主回复，谢谢了！

from blog.

请教作者，为什么会出现一像素边框的问题，就像你说的邮件列表界面，因为Retina屏幕把2x2个像素当1个像素使用。比如原本44像素高的顶部导航栏，在Retina屏上用了88个像素的高度来显示。

所以我css的1px虽然在Retina用2dp。但是一个dp相当于非Retina得二分一dp啊。所以应该1px在任何屏幕下的宽度其实是一样的，那么为什么会出现Retina的一像素边框问题？

我是这样理解的，这里的1像素边框的含义是：要达到使用物理像素(dp)的1像素来表示的效果。

from blog.

看了文章和讨论，发现这些概念没弄清楚的是绝大数人😂

from blog.

0.25

@nicewahson @fattypiggy
既然作者没有回复，我也来试着答答。先看第一个问题：
先明确一个概念，一个css像素(css pixel)的值实际上就是最接近参考像素(reference pixel)的整数个设备像素(device pixels)的值。由定义可知，css像素只和参考像素的大小相关，而参考像素的值只和设备的典型观看距离相关，和分辨率等其他因素无关，关于这点可参考w3c中关于px的定义

所以对于同一个屏幕来说，它的参考像素大小是不变的。那大家可能就有疑惑了，既然参考像素大小不变，那它的css像素大小岂不是也不变？

答案是非也，仔细看上面关于css pixel的定义，能够发现css pixel的基准组成是设备像素(device pixel)，只不过可能不是一个设备像素。到底需要几个设备像素（一定是整数个，不会出现小数的情况），就要看参考像素(reference pixel)的大小了。

知道了上述概念之后，我们再来解答关于同一显示器分辨率提升之后，内容变小的问题就变得非常容易了。以一个典型的1680 * 1050，22英寸的显示器来举例,对于显示器来说，它的参考像素对应的大小约为0.26mm：
（1）当是正常分辨率，即1680 * 1050，它的ppi是90.05，那它一个device pixel的长度就是0.28mm，这时一个device pixel就约等于一个参考像素对应的大小。即1个css像素就等于1个设备像素大小了。如果你用css定义了一个盒子宽为375px，此时你用尺子去屏幕上量，会发现375px盒子的实际宽度是0.28(mm) * 375 = 10.5cm。（这里包括下面都是约等于）
(2) 调整显示器的分辨率为1024 * 640时，此时它一个device pixel对应的长度是0.46mm，虽然它和参考像素对应的大小有差距，但是没办法，你还得使用它，毕竟它现在就是最接近参考像素大小的device pixel了。上面那个375px的盒子，此时的实际宽度则为0.46 * 375 = 17.4cm。所以降低分辨率之后，相同的内容会显得大了。
(3) 调整显示器的分辨率为1920 * 1080，此时它的一个device pixel对应的长度是0.25，此时375px的盒子实际宽度是0.25 * 375 = 9.3cm，所以提高分辨率后，内容自然就变小了。

@nicewahson @fattypiggy
既然作者没有回复，我也来试着答答。先看第一个问题：
先明确一个概念，一个css像素(css pixel)的值实际上就是最接近参考像素(reference pixel)的整数个设备像素(device pixels)的值。由定义可知，css像素只和参考像素的大小相关，而参考像素的值只和设备的典型观看距离相关，和分辨率等其他因素无关，关于这点可参考w3c中关于px的定义

所以对于同一个屏幕来说，它的参考像素大小是不变的。那大家可能就有疑惑了，既然参考像素大小不变，那它的css像素大小岂不是也不变？

答案是非也，仔细看上面关于css pixel的定义，能够发现css pixel的基准组成是设备像素(device pixel)，只不过可能不是一个设备像素。到底需要几个设备像素（一定是整数个，不会出现小数的情况），就要看参考像素(reference pixel)的大小了。

知道了上述概念之后，我们再来解答关于同一显示器分辨率提升之后，内容变小的问题就变得非常容易了。以一个典型的1680 * 1050，22英寸的显示器来举例,对于显示器来说，它的参考像素对应的大小约为0.26mm：
（1）当是正常分辨率，即1680 * 1050，它的ppi是90.05，那它一个device pixel的长度就是0.28mm，这时一个device pixel就约等于一个参考像素对应的大小。即1个css像素就等于1个设备像素大小了。如果你用css定义了一个盒子宽为375px，此时你用尺子去屏幕上量，会发现375px盒子的实际宽度是0.28(mm) * 375 = 10.5cm。（这里包括下面都是约等于）
(2) 调整显示器的分辨率为1024 * 640时，此时它一个device pixel对应的长度是0.46mm，虽然它和参考像素对应的大小有差距，但是没办法，你还得使用它，毕竟它现在就是最接近参考像素大小的device pixel了。上面那个375px的盒子，此时的实际宽度则为0.46 * 375 = 17.4cm。所以降低分辨率之后，相同的内容会显得大了。
(3) 调整显示器的分辨率为1920 * 1080，此时它的一个device pixel对应的长度是0.25，此时375px的盒子实际宽度是0.25 * 375 = 9.3cm，所以提高分辨率后，内容自然就变小了。

我想问一下，前面作者不是说了么，设备像素在设备生产出来已经被固定了，为什么在切换设备分辨率的时候设备像素会进行改变呢？换个问题就是在切换分辨率的时候做了什么

from blog.

0.25

@nicewahson @fattypiggy
既然作者没有回复，我也来试着答答。先看第一个问题：
先明确一个概念，一个css像素(css pixel)的值实际上就是最接近参考像素(reference pixel)的整数个设备像素(device pixels)的值。由定义可知，css像素只和参考像素的大小相关，而参考像素的值只和设备的典型观看距离相关，和分辨率等其他因素无关，关于这点可参考w3c中关于px的定义
所以对于同一个屏幕来说，它的参考像素大小是不变的。那大家可能就有疑惑了，既然参考像素大小不变，那它的css像素大小岂不是也不变？
答案是非也，仔细看上面关于css pixel的定义，能够发现css pixel的基准组成是设备像素(device pixel)，只不过可能不是一个设备像素。到底需要几个设备像素（一定是整数个，不会出现小数的情况），就要看参考像素(reference pixel)的大小了。
知道了上述概念之后，我们再来解答关于同一显示器分辨率提升之后，内容变小的问题就变得非常容易了。以一个典型的1680 * 1050，22英寸的显示器来举例,对于显示器来说，它的参考像素对应的大小约为0.26mm：
（1）当是正常分辨率，即1680 * 1050，它的ppi是90.05，那它一个device pixel的长度就是0.28mm，这时一个device pixel就约等于一个参考像素对应的大小。即1个css像素就等于1个设备像素大小了。如果你用css定义了一个盒子宽为375px，此时你用尺子去屏幕上量，会发现375px盒子的实际宽度是0.28(mm) * 375 = 10.5cm。（这里包括下面都是约等于）
(2) 调整显示器的分辨率为1024 * 640时，此时它一个device pixel对应的长度是0.46mm，虽然它和参考像素对应的大小有差距，但是没办法，你还得使用它，毕竟它现在就是最接近参考像素大小的device pixel了。上面那个375px的盒子，此时的实际宽度则为0.46 * 375 = 17.4cm。所以降低分辨率之后，相同的内容会显得大了。
(3) 调整显示器的分辨率为1920 * 1080，此时它的一个device pixel对应的长度是0.25，此时375px的盒子实际宽度是0.25 * 375 = 9.3cm，所以提高分辨率后，内容自然就变小了。

@nicewahson @fattypiggy
既然作者没有回复，我也来试着答答。先看第一个问题：
先明确一个概念，一个css像素(css pixel)的值实际上就是最接近参考像素(reference pixel)的整数个设备像素(device pixels)的值。由定义可知，css像素只和参考像素的大小相关，而参考像素的值只和设备的典型观看距离相关，和分辨率等其他因素无关，关于这点可参考w3c中关于px的定义
所以对于同一个屏幕来说，它的参考像素大小是不变的。那大家可能就有疑惑了，既然参考像素大小不变，那它的css像素大小岂不是也不变？
答案是非也，仔细看上面关于css pixel的定义，能够发现css pixel的基准组成是设备像素(device pixel)，只不过可能不是一个设备像素。到底需要几个设备像素（一定是整数个，不会出现小数的情况），就要看参考像素(reference pixel)的大小了。
知道了上述概念之后，我们再来解答关于同一显示器分辨率提升之后，内容变小的问题就变得非常容易了。以一个典型的1680 * 1050，22英寸的显示器来举例,对于显示器来说，它的参考像素对应的大小约为0.26mm：
（1）当是正常分辨率，即1680 * 1050，它的ppi是90.05，那它一个device pixel的长度就是0.28mm，这时一个device pixel就约等于一个参考像素对应的大小。即1个css像素就等于1个设备像素大小了。如果你用css定义了一个盒子宽为375px，此时你用尺子去屏幕上量，会发现375px盒子的实际宽度是0.28(mm) * 375 = 10.5cm。（这里包括下面都是约等于）
(2) 调整显示器的分辨率为1024 * 640时，此时它一个device pixel对应的长度是0.46mm，虽然它和参考像素对应的大小有差距，但是没办法，你还得使用它，毕竟它现在就是最接近参考像素大小的device pixel了。上面那个375px的盒子，此时的实际宽度则为0.46 * 375 = 17.4cm。所以降低分辨率之后，相同的内容会显得大了。
(3) 调整显示器的分辨率为1920 * 1080，此时它的一个device pixel对应的长度是0.25，此时375px的盒子实际宽度是0.25 * 375 = 9.3cm，所以提高分辨率后，内容自然就变小了。

我想问一下，前面作者不是说了么，设备像素在设备生产出来已经被固定了，为什么在切换设备分辨率的时候设备像素会进行改变呢？换个问题就是在切换分辨率的时候做了什么

这里切换的是设备的显示分辨率，而不是物理分辨率。你可以仔细看一下你设备的显示器参数。

from blog.

发现一个矛盾点（2.4 的举例和4.2部分的理解的描述）。
在2.1中关于“设备像素”的定义，表明了物理像素点是固定的。（我理解为它是一个绝对的可测量单位值，和厘米毫米一样。）
在2.4中描述“设备像素和CSS像素之间的关系"的例子：当 drp = 2 时，使用4个设备像素显示1个CSS像素。
以及在 “4.2 理解” 中描述：“设备像素比(dpr) 是指在移动开发中1个css像素占用多少设备像素”。就是说，dpr = 2 时，一个 css 像素占用 2 个物理像素。
问题：
一个宽高都为 100px * 100px 的元素，在浏览器中用 'iphone6' 查看和普通 web 下查看，'iphone6' 模式下的元素比 web 模式下的高度小了一半。
分析： 'iphone6' 的 dpr = 2，那么元素的高对应的物理像素为 200，web 模式下元素的高对应的物理像素为 100，而物理像素在出厂的时候就已经确定了，不可变，按照文中的描述，应该是 'iphone6' 模式下的元素会比 web 模式下的元素高一倍才对，然而实际的效果却相反。
从实验结果看，dpr 应该是指一个设备像素代表了多少个 css 像素。
从公式上看也应该是这个意思：DPR = 物理像素 / CSS像素 ===> 物理像素 = DPR * CSS 像素

from blog.