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

　　这个标签内的内容表示啥意思呢? name为viewport表示供移动设备使用. content定义了viewport的属性.

　　width表示移动设设备下显示的宽度为设备宽度(device-width)

　　height表示移动设设备下显示的宽度为设备宽度.

　　user-scalable表示用户缩放能力, no表示不允许.

　　initial-scale表示设备与视口的缩放比率

　　maximum和minimum分别表示缩放的最大最小值, 要注意的是, maximum必须必minimum大.

　　上面的meta标签就是告诉浏览器, 不要在移动端显示的时候缩放.

　　meta viewport 是做什么用的?

　　meta viewport 是用于适配移动设备的，为了使不管是什么宽度的页面都能在移动设备端得到完美适配(不需要用户缩放和滚动横向滚动条并且字体图片等显示正常)

　　怎么写?

　　使用该meta标签时name为viewport代表供移动设备使用,在content中写属性，用逗号隔开

　　· width：控制 viewport 的大小，可以给它指定一个值(正整数)，或者是一个特殊的值(如：device-width 设备独立像素宽度，单位缩放为 1 时);

　　· initial-scale：初始缩放比例，即当页面第一次加载时的缩放比例，为一个数字(可以带小数);

　　· maximum-scale：允许用户缩放到的最大比例，为一个数字(可以带小数);

　　· minimum-scale：允许用户缩放到的最小比例，为一个数字(可以带小数);

　　· user-scalable：是否允许用户手动缩放，值为 “no”(不允许) 或 “yes”(允许);

　　· height：与 width 相对应(很少使用)。

　　如果不知道设备的理想宽度就用特殊值 device-width，同时 initial-scale=1 来的到一个理想的 viewport (ideal viewport)。

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

　　自身理解：

　　meta标签最大的作用就是能让那些为pc端设计的网页也能在不需要用户手动缩放(initial-scale=1)，不出现横向滚动条(width=device-width)的情况下，都可以完美的将页面呈现给用户。因为现在智能手机的大量普及，越来越多的网站都会为移动设备进行单独的设计，此时必须有一个能够完美适配移动设备的 viewport。

上一篇

http和https区别以及哪个更安全？

下一篇

mvvm的概念、原理及实现