移动端适口配置——viewport

手机有不同的分辨率，不同的屏幕大小，如何使我们开发应用或页面大小适合各种高低端手机的使用？学习html5的  viewport技术能够帮助我们实现这一点；

首先来介绍一下，什么是viewport技术：viewport技术就是适配屏幕像素密度的技术；在css中，1px单位在像素密度越大的设备上表现的实际尺寸就越小。为了保证尺寸不失真，一般会在屏幕密度可选性较多的移动设备中来使用viewport技术，让同一套样式在不同密度设备中表现一致。

viewport技术需要使用元信息标签来实现；

说了这么多，下面直接上代码，可以将下面代码写入一个html页面中，将代码运行在移动端来进行测试：

<!--一般，页面准许用户缩放时，使用以下设置，在移动端两手指捏合触发的事件-->

<meta name="viewport" content="width=device-width,maximum-scale=10,initial-scale=1,minimum-scale=1,user-scalable=yes">

<!--不准许用户缩放页面，使用以下设置-->

<meta name="viewport" content="width=device-width,maximum-scale=1,minimum-scale=1,initial-scale=1,user-scalable=no">

下面就分别来介绍一下它的一些属性的含义以及该如何设置

width:设置的是展示页面的视口（viewport）的宽度，一般不需要指定数值，让浏览器根据设备的实际宽度设置为自己的宽度即可；

maximum-scale:设置页面的放大倍数，取值范围：0.25——10.0；一般取值为：5、8、10；

initial-scale:初始化页面放大倍率，取值范围：0.25——10.0；一般取值为：1；

minimum-scale:设置页面的缩小倍数，取值范围：0.25——10.0，一般取值和initial-scale一致；

（以上三个属性互相配合使用，initial==mini<=max）；

user-scalable:设置用户是否可以缩放页面：默认：yes(1)；或者no（0）；

viewport先介绍到这里，如果对您有所帮助的话，请点赞并关注哦，我会不定时的更新一下自己学习的经验以及见解，和大家进行交流。

您赞就是是我最大的动力！！！