何为视口,视口就是电脑端和手机端盛放网页的虚拟容器。
当我们在开发网页的时候,不可避免地会遇到同一网页在不同设备显示不同的情况。在电脑端全屏显示,但到不同的手机上就会出现显示的字体,图片的大小不同。因为电脑的虚拟容器的宽度是980px,这个宽度因为历史原因,一直固定在这个数。而不同型号的手机不一样,宽度一般都在三四百作业。此时,存放网页的虚拟容器就会被压缩,网页的内容在手机端就会比电脑端的小。
手机设备的宽度叫做设备独立像素,这个宽度是我们现实生活所接触到的宽度,是物理硬件的宽度。手机显示内容的发光点叫做物理像素,也叫物理分辨率,这个在开发网站时不做关心。在我们写css代码时,里面规定宽度的像素叫做逻辑像素。在电脑端,1个逻辑像素 等于 1个物理像素,但是在手机端,两者大小并不等同。
盛放网页的虚拟容器的宽度取决于手机的宽度,即设备独立像素,当一个在电脑宽度为980px的网页放到宽度375px的手机上时,就会按980:375的比例压缩。这个过程中,逻辑像素没有改变,由于电脑和手机在同一水平线上的发光点不同,所以物理像素也就不同,此时逻辑像素和物理像素不同。
如果我们不想让容器被压缩,我们要怎么做呢?我们可以设置这个虚拟容器的宽度。当这个虚拟容器的宽度既比电脑端小,又不比手机端的大,那么无论在哪个设备上显示,都不需要进行压缩。在编写代码的时候,添加这样一行代码<meta name="viewport" content="width=device-width">,就可以实现网页显示内容大小一样的效果。