h5 页面自适应，完美，弹

目前知道的 h5 页的自适应方法有两种，但都不是很完美。

一种是快被被淘汰的：

<meta name="viewport" cOntent="width=750,target-densitydpi=device-dpi,user-scalable=no"/>

这个的好处是所有元素都可以用 px 来规定宽高，因为页面会随着设备的尺寸自动缩放。 但是这种方法很坑，因为写出来的页面是固定比例的，在不同设备下页面比例之外的部分都是一片白色，非常难看。

第二种方法是现在最常用的：

<meta name="viewport" cOntent="width=device-width, initial-scale=1.0, minimum-scale=1.0,maximum-scale=1.0">

页面宽度等于设备宽度，高度 100%就好了。

这种方法的缺点在于，因为页面宽高不确定，页面里元素只能用百分比来规定尺寸。有些情况百分比不是那么方便： 比如要让 div 中的字体垂直居中，但是 div 高度是用百分比写的没办法用 line-height。 又比如 iphone5 这种奇葩机型，按比例写出来的页面肯定会崩溃的。

是不是我孤陋寡闻，其实还有一种完美解决自适应问题的方法呢。