视口

何为视口，视口就是电脑端和手机端盛放网页的虚拟容器。

当我们在开发网页的时候，不可避免地会遇到同一网页在不同设备显示不同的情况。在电脑端全屏显示，但到不同的手机上就会出现显示的字体，图片的大小不同。因为电脑的虚拟容器的宽度是980px，这个宽度因为历史原因，一直固定在这个数。而不同型号的手机不一样，宽度一般都在三四百作业。此时，存放网页的虚拟容器就会被压缩，网页的内容在手机端就会比电脑端的小。

手机设备的宽度叫做设备独立像素，这个宽度是我们现实生活所接触到的宽度，是物理硬件的宽度。手机显示内容的发光点叫做物理像素，也叫物理分辨率，这个在开发网站时不做关心。在我们写css代码时，里面规定宽度的像素叫做逻辑像素。在电脑端，1个逻辑像素 等于 1个物理像素，但是在手机端，两者大小并不等同。

盛放网页的虚拟容器的宽度取决于手机的宽度，即设备独立像素，当一个在电脑宽度为980px的网页放到宽度375px的手机上时，就会按980:375的比例压缩。这个过程中，逻辑像素没有改变，由于电脑和手机在同一水平线上的发光点不同，所以物理像素也就不同，此时逻辑像素和物理像素不同。

如果我们不想让容器被压缩，我们要怎么做呢？我们可以设置这个虚拟容器的宽度。当这个虚拟容器的宽度既比电脑端小，又不比手机端的大，那么无论在哪个设备上显示，都不需要进行压缩。在编写代码的时候，添加这样一行代码<meta name="viewport" content="width=device-width">，就可以实现网页显示内容大小一样的效果。