大家都知道,viewport是用来设置可视窗口的属性的,它有一下几个值
<b>1.width</b>: 用来设置layout viewport的宽度.
<b>2.initial-scale</b>: 用来设置页面的初始缩放值以及layout viewport的宽度。
<b>3.minimum-scale</b>: 用来设置允许的最小缩放值(例如,用户可以缩小至什么程度)。
<b>4.maximum-scale</b>: 用来设置允许的最大缩放值(例如,用户可以放大至什么程度)。
<b>5.height</b>: 期望用于设置layout viewport的高度。但一直没被支持。
<b>6.user-scalable</b>: 当设置为no时,则禁止用户进行缩放
另外还有两个重要的属性,并不在viewport的定义里面,但是必须知道它们,我们暂时列为7和8
<b>7.ideal viewport</b>:字面翻译为理想视窗,其实这个值可以将inital viewport设为1,width设为device-width,再使用document.documentElement.getBoundingClientRect().width计算出来,也可根据chrome中的开发者工具的模拟器查看,一般值如下,ip4,ip5 320,ip6 375,ip6s 414,...
<b>8.layout viewport</b>:这个值是ideal viewport和initial-scale共同计算的结果,计算方式是,假如ideal viewport为300,initial-scale为0.5,那么它就为600,即 ideal viewport/initial-scale,但这是对于一般情况成立,因为layout viewport是有最大最小值限制的
说完基本概念,我们来谈谈怎么用width去设置layout viewport<b>(lv)</b>,根据定义,只要直接这样设置width=400,那么lv就等于400,设置width=200,那么lv就等于200,我一开始也是这么认为的,但是,此处并不是这样,我在ip5s中验证了下,最小值是320,最大值是10000,在vivo x5中验证了下,最小值是360,最大值是10000,所以,此处要留意<b>最小值最大值</b>的设置;
OK,这篇文章就到此吧,主要是讲解理论知识的,接下来大家可以关注下一文章,讲解实际的应用