视口可以分为布局视口,视觉视口,理想视口
布局视口
也是理解成一个盒子，但和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标签的作用是让当前布局视口的宽度等于设备的宽度，同时不允许用户手动缩放。
