视口像素 Vs 设备像素 Vs CSS 像素

Question

CSS 像素：

div.sidebar {
    width: 300px;
}

css-pixel-width = device-pixel-width x 1 / Device-pixel-ratio

例如：假设设备像素为 1920(w) X 960(h) 且 dpr = 2。

css-width = 1920 * (1 css px / 2 device px) = 960 px

---

设备像素：

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

---

缩放系数：

当缩放因子正好是 100% 时，一个 CSS 像素等于一个设备像素（尽管即将到来的中间层将在这里代替设备像素。）下图描述了这一点。这里没什么可看的，因为一个 CSS 像素正好与一个设备像素重叠。

我可能应该警告您，“缩放 100%”在 Web 开发中没有什么意义。缩放级别对我们来说并不重要；我们需要知道的是当前有多少 CSS 像素适合屏幕。下面两张图片说明了当用户缩放时会发生什么。当用户缩小时，第一个显示设备像素（深蓝色背景）和 CSS 像素（半透明前景）。 CSS 像素变小了；一个设备像素与多个 CSS 像素重叠。当用户放大时，第二张图片显示设备和 CSS 像素。一个 CSS 像素现在与多个设备像素重叠。

问题：

1) 如何管理缩放级别？元标记的auto-scale 属性是否决定缩放级别？

---

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

Wrt 视口像素，

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

---

问题：

2) 什么是视口像素？

Answer 1

听起来回答者在回答链接问题时当场编造了该术语。他们的答案（在我编辑之前）完全由大引号组成，这无济于事，给人一种错误的印象，即他们引用了一个显然定义了这些术语的外部来源。

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