移动端视口设置 viewport

提示：这里使用的测试工具是Chrome，老版本的Chrome，有的同学没见过这个，其实就是Chrome浏览器，

如果有需要，可以留个邮箱；

-----------------------------------------------------------

先来看看第一个参数：

< meta name= "viewport" content= "width=device-width">

width=device-width    width 设置的是viewport的宽度，这里设置 width=device-width 的意思是视口和我们的

移动设备的宽度是一样的，效果如下：这里测试用的是苹果4的屏幕，320的宽度，内容是刚好铺满屏幕的；

我们再换一个苹果6plus：414的宽度同样是铺满屏的，也就是适应屏幕的宽度；

我们假设这里指定width=414，那么在苹果6plus下面显示是正常的，但是到了苹果4下面显示就不正常了，

视口宽度414>320 ,就会出现视口横向超出了，下面的效果：

所以说，进行移动端的页面的开发的时候，我们需要适配不同的屏幕，这里设置width=device-width,

第二个参数：  initial-scale=1.0

< meta name= "viewport" content= "width=device-width,initial-scale=1.0">

这里的 initial-scale 设置 页面的初始缩放比例，也就是页面的一开始加载出来的时候的页面的缩放比例；

一般情况下我们就是不缩放， initial-scale=1.0 ,也就是正常显示；

我们看看缩放比为1.5的情况下的情形：可以看出放大了

第三个参数：maximum-scale=1.0 设置最大可以缩放的比例；

                     minimum-scale=1.0 设置最小的可以缩放的比例；

< meta name= "viewport" content= "width=device-width,initial-scale=1.5,maximum-scale=1.0, minimum-scale=1.0>

第四个参数：user-scalable=no 设置用户是否可以对页面进行缩放 ；

< meta name= "viewport" content= "width=device-width,initial-scale=1.5,maximum-scale=1.0,

minimum-scale=1.0,user-scalable=no">