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

CSS像素：

div.sidebar {
    width: 300px;
}

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

例如：例如，具有1920（宽）X 960（高）设备像素且dpr=2的设备

css宽度=1920*（1 css像素/2设备像素）=960像素

---

设备像素：

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

---

缩放因子：

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

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

问题：

1） 如何管理缩放级别？元标记的

自动缩放

属性决定缩放级别吗

---

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

Wrt视口像素

初始比例

设置CSS像素和视口像素之间的关系，如前所述。例如：

initial scale=1

表示1个CSS像素等于1个视口像素

---

问题：

---

2） 什么是视口像素？

听起来像是回答者在回答链接问题时当场编造的。他们的答案（在我编辑之前）完全是区块引用，给人一种错误的印象，认为他们引用了一个显然定义了这些术语的外部来源

---

CSS没有定义这样一个术语，也没有任何其他规范。viewport meta标记只是改变了移动浏览器的缩放行为，对渲染没有任何意义。

@overexchange:但是，回答链接的文章也没有真正定义这个术语。因此，这个术语的含义尚不清楚。