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

Question

CSS像素：

div.sidebar {
    width: 300px;
}

  

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

例如：Say，具有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％”在网页开发中没什么意义。缩放等级对我们来说并不重要;我们需要知道的是屏幕上当前有多少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没有定义这样的术语，也没有任何其他规范。视口元标记只是更改移动浏览器的缩放行为，对渲染没有任何有意义的影响。