2021-05-06

学习目标：

什么是视口？充分理解视口的含义。

---

学习内容：

所谓视口

        在 Windows的作图函数中，涉及逻辑坐标到设备坐标的转换。这里提到的窗口(window)、视口(viewport)是对应的概念。视口是与设备相关的一个矩形区域，坐标单位是与设备相关的"像素"，大多数情况下，视口与客户区相同。窗口的坐标是逻辑坐标，与设备无关，可能是像素、毫米或者英寸。窗口坐标的原点与视口坐标的原点始终对应于同一点。对于同一个图形，用窗口坐标系统表达的该区域的长和宽与视口的坐标系统表达的长和宽是不同的。二者就定义了这两个坐标系统的比例关系。程序作图时，使用的坐标总是是窗口坐标。而实际的显示或输出设备却各有自己的坐标。

逻辑像素和物理像素

物理像素:指的是手机或电脑屏上的发光点。叫物理分辨率,也叫物理像素。

如: iphone6的分辨率1334*750，在水平方向上有750个发光点,在垂直方向上有1334个发光点。

在开发时,不关心物理像素。

逻辑像素：在写css代码时,写的像素叫逻辑像素,如 box{width:1opx, height:10px;}

在电脑端:1个逻辑像素等于1个物理像素，但是在手机端就不一样了。

举例说明

写一个200*200的盒子，在pc端，逻辑像素和物理像素是一一对应的。

在iPhone6/7/8plus上，盒子先放进虚拟容器（980px）中，然后压缩放到414的手机中；

在iPhone6/7/8上，盒子先放进虚拟容器（980px）中，然后压缩放到375的手机中；

在iPhone5上，盒子先放进虚拟容器（980px）中，然后压缩放到320的手机中。

得出结论，同一个盒子在不同手机中，大小是不一样的。

同一个盒子在不同的手机中,显示的大小,取决于手机的分辨率,正确吗?

答:不正确，同一个盒子在不同的手机中,显示的大小取决于手机的宽度,这个宽度叫设备独立像素。

以 iphone6为例:

分辨率是:1334*750，在水平方向上有750个发光点，在垂直方向上有1334个发光点。

设备独立像素:375*667

就是水平方向来说：

       分辨率:750 有750个发光点

       设备独立像素：375

像素是一块一块：1*1的像素块

结论：在 iphone6上,1设备独立像素块，最终映射到手机的上，可以映射4个发光点。

怎样让盒子在手机里显示和规格一样的大小

即如何不让盒子压缩?

答:为了不让盒子放到手机里被压缩,可以设置这个虚拟容器的宽度。

如：
      200*200盒子。
      人为设置虚拟容器是的宽度是414< meta name="viewport" content" ' width=414>

      1)200*200的盒子放到414的盒子,肯定可以放下。

      2)414的虚拟容器放到414的手机中就不会压缩。

结论:如果不想让盒子被压缩,你需要设置虚拟容器的大小。如果设置成和手机宽度一样的，这样。这个盒子在所有手机都不会被压缩了。

得出结论

只要写手机端的页面，就必须设置视口大小。