视口宽度=设备独立像素*dpr 理解不了

同学你好，布局视口（页面视口）和视觉视口的区别，可以参考如下图理解：

布局视口说白了就是页面的宽度

视觉视口就是设备的宽度

祝学习愉快~

同学你好，建议下载源码，或者自己练习一下，结合案例去理解更容易明白。具体参考如下：

1、在通用适配案例中，页面设置了缩放为0.5。例如一个页面视口宽度为375px，viewport中设置了width=device-width。那么设置了缩放为0.5之后，为了让页面视口宽度等于设备宽度（width=device-width），页面的视口宽度就会变为750px。只有页面视口宽度为750px，缩放一半之后，才能让页面视口宽度等于设备宽度哦（750/2=375）。如下图以iPhone6为例：

2、视口本身分很多，例如设备的可视视口（即视觉视口），布局视口（页面的可视宽度，页面的视口宽度都行）。

像同学所说的“视口宽度=设备独立像素*dpr ”中，视口宽度说的就是页面的视口宽度。

3、设备独立像素通俗的叫法为css逻辑像素（或者css像素），也就是像如下这样：

当页面不缩放的时候，页面的视口宽度与设备的逻辑像素值是一样的。如下图所示：

4、根据上面iPhone6为例的效果，iPhone6的dpr为2，页面缩放0.5之后视口宽度为750px，设备独立像素为375px，那么750px（页面视口宽度）=375px(设备独立像素)*2(dpr)。

5、同学所说的dpr=设备像素（物理像素）/CSS像素（css逻辑像素）是对的，但是并不是公式只能这样推导。

页面缩放之后的视口宽度恰好和设备物理像素一样了，所以通用适配案例这里，去套用“页面视口宽度=设备独立像素*dpr ”也可以哦。

祝学习愉快~