目前来说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如同一个窗子一样,窗子多大你就可以看到多大,这个窗子还有个特性就是会自动缩放窗子到手机屏幕大小,在他缩放的同时里面的内容也会一同缩放。