怎么理解物理像素和CSS像素？

Question

很不理解这段话：

后来随着技术的发展，移动设备的屏幕像素密度越来越高，从iphone4开始，苹果公司便推出了所谓的Retina屏，分辨率提高了一倍，变成640x960，但屏幕尺寸却没变化，这就意味着同样大小的屏幕上，像素却多了一倍，这时，一个css像素是等于两个物理像素的。

还有一个因素也会引起css中px的变化，那就是用户缩放。例如，当用户把页面放大一倍，那么css中1px所代表的物理像素也会增加一倍；反之把页面缩小一倍，css中1px所代表的物理像素也会减少一倍。

为什么放大后CSS里面1PX对应的物理像素反而增加了？不应该是减少了吗？

还有这张图里面，浅色的是独立像素，即CSS想像素，但是第二张图中一个浅色的CSS像素不是对应了多个物理像素么？但是他说一个设备光点对应多个CSS像素，真的被弄迷糊了，求大神

Answer 1

只讨论宽或高，面积自己乘。
用户把页面放大(手指向外滑动，看到元素变大)一倍，那么css中1px所代表的物理像素也会增加一倍。
1.100px的div不管放大缩小永远都是100px，因为这就是元素单位。
2.200物理像素的设备，不管放大缩小永远都是200物理像素，因为屏幕硬件是死的。
3.200物理像素刚好放下两个100px的div时，1px=1物理像素。
4.页面放大，200物理像素只能看到1个100px的div时，请问1px等于多少物理像素。