meta标签是html页面中用来设置元信息的,(具体不知道什么鬼,好像html页面的补充设置都在这里设置)
历史原因,最早的移动端浏览器显示方式是照搬PC端的,页面也是直接按照pc端的980px或者1024px来显示,那样移动端就自然出现滑条,而且还可以缩放.这是因为以前的前端人员是这样来解决移动端显示的.
随着历史进程,特别是在乔布斯一再强调用户体验这个概念之后,这个概念开始大行其道,移动端浏览器显示体验改变也提上了日程
发展到现在,我们移动端的页面观感体验,基本是单页形式的上下滑动,而且基本定型
因此在移动端页面时,因为历史原因我们要利用html中的meta标签来设置viewport属性,以至于我们可以达到现在的移动端用户要求的页面观感体验!!!!!
说白了 搞那么多就是为了适配移动端,带来更好的移动端浏览体验
那么具体怎么设置?设置值以及作用有哪些?
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
width 设置layout viewport 的宽度，为一个正整数，或字符串"device-width"
//device是设备的意思,也就是设备宽度
initial-scale 设置页面的初始缩放值，为一个数字，可以带小数
minimum-scale 允许用户的最小缩放值，为一个数字，可以带小数
maximum-scale 允许用户的最大缩放值，为一个数字，可以带小数
height 设置layout viewport 的高度，这个属性并不重要，很少使用
user-scalable 是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes代表允许
width能控制layout viewport的宽度，如果不指定该属性，layout viewport将默认为980px或1024px（也可能是其它值，由设备本身决定），如果把layout viewport的宽度设置为移动设备的宽度，那么layout viewport将成为ideal viewport。
更好的原理阐述:https://blog.csdn.net/zhouziyu2011/article/details/60570547
