meta viewport原理是什么？

meta viewport标签的作用是让当前viewport的宽度等于设备的宽度，同时扩展用户进行手动缩放

viewport的原理：移动端浏览器通常都会在一个比移动端屏幕更宽的虚拟窗口中渲染页面，这个虚拟窗口就是 目的是正常展示没有做移动端适应的网页，让他们完整的展示给用户；

解析：

视口：字面意思是视图窗口，在移动web开发中使用。表示将设备浏览器宽度虚拟成一个特定值（或计算得出），这样利于移动web站点跨设备显示效果基本一致。浏览器最新引入了viewport这个meta标签，让网页开发者来控制viewport的大小和缩放，其他手机浏览器也基本支持。

在移动端浏览器当中，存在着两种视口，一种是可见视口（也就是我们说的设备大小），另一种是视窗视口（网页的宽度是多少）。我们的屏幕是320预期* 480分辨率的大小（iPhone4），假设在浏览器中，320的屏幕宽度能够显示980更长的内容。那么320的显示宽度就是可见视口的宽度，而能够显示的980预期的宽度就是视窗视口的宽度。

为了显示更多的内容，大多数的浏览器会把自己的视窗视口扩大，简易的理解，就是让原本320的屏幕宽度能够容下980甚至更多更宽的内容（将网页等比例缩小） 。

视口属性值 width设置layout viewport的宽度，为一个正整数，或字符串“ width-device”
initial-scale设置页面的初始缩放值，为一个数字，可以带小数
minimum-scale允许用户的最小缩放值，为一个数字，可以带小数
maximum-scale允许用户的最大缩放值，为一个数字，可以带小数
height设置layout viewport的高度，这个属性对我们并不重要，很少使用 user-scalable是否允许用户进行缩放，表示“ no”或“ yes”，no代表允许，yes代表允许这些属性可以同时使用，也可以单独使用或混合使用，多个属性同时使用时用逗号隔开就行了。