＜meta name=“viewport“ content=“width=device-width, initial-scale=1, maximum-scale=1“＞

移动端和pc端不同。现在手机屏幕分辨率越来越高，但屏幕大小并没有太大的变化，这意味着每个物理像素里装了多个实际像素。

还有一个因素也会引起css中px的变化，那就是用户缩放。例如，当用户把页面放大一倍，那么css中1px所代表的物理像素也会增加一倍；反之把页面缩小一倍，css中1px所代表的物理像素也会减少一倍。

所以在做移动端开发时，为了使移动端的页面在不同的手机上同样的大小来显示，我们可以将页面的宽度固定，然后获取设备的宽度，可以得到我们之前设定的宽度与设备宽度的比例，再使用HTML5新增的viewport来对页面进行缩放，并固定不允许用户再重新缩放。

在看viewport的具体用法之前，我们先搞清楚几个概念。

layout viewport：

layout viewport 是网页的所有内容，他可以全部或者部分展示给用户。

visual viewport

visual viewport 就是当前显示给用户内容的窗口，你可以拖动或者放大缩小网页。

总之这一切基本都是为了适应手机端网页的浏览。
这里的width=device-width, initial-scale=1, maximum-scale=1定义了页面宽度为设别宽度，缩放比例为1也就是没有缩放，最大缩放值也是1倍。initial-scale=1 解决了 iphone、ipad的毛病，width=device-width则解决了IE的毛病：
完美的写法

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