在CSS标准文档中，视口viewport被称为初始化包含块，它是所有CSS百分比宽度推算的根源。通常，在桌面端，视口的宽度和浏览器的宽度是一致的。但在手机端就比较麻烦了，视口分为布局视口(layout viewport)、视觉视口(visual viewport)和理想视口(ideal viewport)
布局视口
如果你有一个宽度是1000px布局的网站，然后把它放到iphoneX中浏览，情况大概是下面这样的
把宽度为1000px的网站，放到宽度为375px的手机浏览器中查看，基本看不清楚网站的内容。为了解决这个问题，就引入了布局视口的概念。在手机上，视口的宽度不再与浏览器的宽度相关联，而是完全独立的，我们称它为布局视口，CSS布局会根据它来计算，并被它约束
为了容纳桌面端设计的网站，移动设备默认的布局视口远大于屏幕的宽度，具体是多宽，这个是由设备决定的，下图列出了一些设备上浏览器的默认viewport的宽度
比如说有一个宽度为800px的盒子，在iphoneX上浏览，宽度占据整个视口的800 / 980
布局视口的尺寸可以通过document.documentElement.clientWidth获取
视觉视口
视觉视口是用户正在看到的网站的区域，视觉视口的大小不是一成不变的，如果用户缩小网站，它看到的网站区域将变大，视觉视口也就变大了。如果用户放大网站，它看到的网站区域将变小，视觉视口也就变小了
理想视口
默认情况下，手机浏览器的布局视口宽度为980到1024，很显然这对手机设备来说并不理想，因此苹果最先引入了理想视口的概念。理想视口指的是把布局视口的宽度设置为与理想视口宽度一致，可以通过meta标签设置理想视口
<!-- 布局视口的宽度应该与理想视口的宽度一致 -->
一般的， 只有当网站是为手机准备的时候才应该使用理想视口。
定义理想视口是浏览器的工作，不是设备或操作系统的工作，所以同一设备的不同浏览器拥有不同的理想视口。浏览器的理想视口的大小也取决于它所处的设备，不同设备上同款浏览器拥有不同的理想视口。通常理想视口就是屏幕的宽度。
meta视口
meta视口标签存在的主要目的是让布局视口的尺寸和理想视口的尺寸匹配
meta视口标签应该被放在HTML文档的<head>中，格式如下:
meta标签的每一个名/值对都是一个给浏览器发号命令的指令，它们被逗号分隔，共有6个
1、设置布局视口的宽度为特定的值
2、initial-scale:设置页面的初始缩放程度和布局视口的宽度
3、minimum-scale:设置了最小缩放程度(用户可缩小的程度)
4、maximum-scale:设置了最大缩放程度(用户可放大的程度)
5、user-scalable:是否阻止用户进行缩放
6、height:设置布局视口的高度(未被实现)
width
width通常取值device-width，表示和理想视口一致
initial-scale
initial-scale通常取值1.0，表示不缩放
minimum-scale和maximum-scale
minimum-scale和maximum-scale通常取值1.0
user-scalable
user-scalable通常取值no，表示禁止缩放
常用meta视口设置