viewport

目前来说viewport网上搜索到的用法大多都有问题。

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

这个问题就是如果你的一个定宽的页面（比如320px宽），那么在宽度超过320px的手机上两边会有黑边。

应对方案就是你别用定宽写法写页面了，用自适应写法，但这要设计师的配合和代码量的增加。

我研究了下viewport，发现其实他是自带一个缩放特性来做不同屏幕的兼容。

只需将 width=device-width 改为 width=320 （320是定宽页面的宽度，要保持一至，比如页面640宽时这里也就是640）即可使用viewport 来兼容不同屏幕。

<meta name="viewport" content="width=320">

原理是vewport如同一个窗子一样，窗子多大你就可以看到多大，这个窗子还有个特性就是会自动缩放窗子到手机屏幕大小，在他缩放的同时里面的内容也会一同缩放。