viewport 移动端

meta 中viewport，width设置的石布局viewport的宽度，scale设置的是窗口与其实际像素的缩放，对于iphone5 屏幕scale为1时是320px*568px，如果scale为2的话，则是160px*284px。

窗口viewport和布局viewport

对于iphone5 屏幕的像素比是320*568，如果不加meta控制，默认的布局viewport是980px，窗口为了适应则自动调整scale到宽度为980px。

 

 

设置：<meta name="viewport" content="width=500"> 可以看出只设置html宽度的话，窗口viewport会调整scale和其同样宽度。

<meta name="viewport" content="width=device-width">  将html宽度设置为device-width宽度，则是手机设备的宽度，这时scale自动调整为1.

以上的情况是只设置布局viewport的html的宽度，窗口viewport的scale跟随调整，
如果html中的内容宽度将html宽度撑开，scale也同样会跟着调整，这样不合理，所以需要将scale固定住。

如果只设置width则scale会跟随宽度调整，如果只设置scale则默认width为device-width。

<meta name="viewport" content="initial-scale=2">

最后一般这样用：

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