视口可以分为布局视口,视觉视口,理想视口

布局视口

也是理解成一个盒子，但和pc端不同的是，它是固定的，即不会变大变小。 浏览器厂商针对移动端设备设计了一个容器，

没有设置 <meta name="viewprot" content="width=device-width,initial-scale=1.0,user-scalable=no"></meta>的情况下

会先用这个容器去承装pc网页，这个容器一般是980px。

视觉视口

用户可见的区域，绝对宽度永远和设备屏幕一样宽怎么理解呢，打个比喻：布局视口就像是在显微镜下的观察器皿，里面的元素就是各种被观察物，而视觉视口正是显微镜，一直只有那么点地方给我们看，但是我们可以放大缩小，正因为观察器皿没有变化，所以观察物不会被移动，这就是移动端元素不会因为放大缩小错位的原因。

理想视口

没有设置为非标准理想视口优点：不同设备呈现效果几乎一样，因为是通过布局容器等比缩放的缺点：元素太小，页面文字不清楚，用户体验不好就是上面介绍的等比缩放过来的页面

设置了符合理想视口标准优点：页面清晰展现，内容不再小到难以观察，用户体验较好缺点：同一个元素不同屏幕（设备）呈现效果不一样解决：做适配

主要通过  <meta name="viewprot" content="width=device-width,initial-scale=1.0,user-scalable=no"></meta>来设置

该meta标签的作用是让当前布局视口的宽度等于设备的宽度，同时不允许用户手动缩放。