视口像素 vs 设备像素 vs CSS像素

Question

CSS pixel:

div.sidebar {
    width: 300px;
}

css像素宽度 = 设备像素宽度 x 1 / 设备像素比

例如：假设某个设备具有1920(w) X 960(h)的设备像素和dpr = 2。

css宽度 = 1920 x (1 css像素 / 2 设备像素) = 960px

---

设备像素：

@media all and (max-device-width: 320px) {
      ....    
}

---

缩放因子：

当缩放因子正好为100%时，一个CSS像素等于一个设备像素（虽然即将推出的中间层将在此处取代设备像素）。下面的图片描述了这一点。由于一个CSS像素恰好重叠一个设备像素，所以没有什么可看的。

我应该提醒你，“缩放100%”在网页开发中意义不大。对我们来说，缩放级别不重要；我们需要知道当前有多少CSS像素适合屏幕。以下两个图像说明了用户缩放时会发生什么。第一个显示了设备像素（深蓝色背景）和CSS像素（半透明前景），当用户缩小时，CSS像素变小，一个设备像素重叠几个CSS像素。第二个图像显示了设备和CSS像素，当用户放大时，一个CSS像素现在重叠几个设备像素。

问题：

1）如何管理缩放级别？meta标签的auto-scale属性是否决定了缩放级别？

---

视口：它是区域（以CSS像素为单位）

关于视口像素，

initial-scale设置CSS像素和视口像素之间的关系，如此处所述。例如：initial-scale = 1表示1个CSS像素等于1个视口像素。

---

问题：

2）什么是视口像素？

- overexchange

Answer 1

听起来回答者在回答链接问题时即兴创造了这个术语。他们的回答（在我编辑之前）完全由块引用组成，给人误导，似乎引用了一个外部源，据称定义了那些术语。

CSS没有定义这样的术语，也没有任何其他规范。视口元标记仅改变移动浏览器的缩放行为，对呈现没有任何有意义的影响。

- BoltClock

---

@overexchange：然而，回答链接的所有文章都没有定义这个术语。因此，这个术语到底是什么意思仍然不清楚。 - BoltClock