对图文混排支持的不好

对css3的某些属性支持不好

说说淘宝的首页

我先说说淘宝的首页，现在只有首页是用了rem做样式。
至于实现的方法，你可能说反了，他是先用js来计算宽度，然后动态改变html元素的font-size，以此来影响rem的大小，达到适配的效果。为了字体的效果达到最佳，目前是用的px单位，只有12px和24px。

我认为这是目前看到的最好的方法，也兼容了iPhone6和iPhone6+。淘宝也是上线没多久，据说马上会跟新到2.0版本。

说说viewpoint

这是你贴的代码。

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

另外也有这样的写法。这是用js的方式。

 var phoneScale = parseInt(window.screen.width)/640;
document.write('<meta name="viewport" content="width=640, initial-scale = '+phoneScale+', maximum-scale = '+phoneScale+', maximum-scale = '+phoneScale+', target-densitydpi=device-dpi">');
}

这两个会让浏览器去缩放。你也知道了，这是缩放。既然是缩放，那么就会失真，这是由于浏览器的自身渲染导致的。你发的网页，我用nexus4测了一下，虽然不是太过明显，但里面的灰色线条会有粗细不一致的问题，也就是说在某些分辨率也会产生几条 1px 的直线看起来不一样粗的情况。这个问题进一步的引申，就变成了你无法准确的在页面上画出规整的直线。

在一些手机上，如果用了一些下载的字体，甚至会发虚（字体的问题你可以找资料仔细看看）。而且一些情况下会有轻微的撕裂和发糊现象，如果你用了部分CSS3的属性，发糊的现象可能会更严重，就是是楼上的说法。还有一个问题就是渲染带来的卡顿，生产中iPhone表现出了部分页面滑动不自然。我认为这是各个浏览器的实现不一样带来的渲染兼容问题，不知事实上如何。

我对这种方案的评价是

够用，但不完美

什么是主流

这种放缩的方式是不是主流我不敢说，但这种简单粗暴高效的方式有相当的人在用。为什么呢？能用编辑器拖啊！里面的位置都是死的，全是绝对定位。设计稿怎么样，直接拖出来，不用动脑子。反正在微信H5页面里，相当的广告都是这样实现的。

再看看你的第一段代码。摆明了，照原生的来。在这样设定后，就会有很多的实现方法了。

 <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1,user-scalable=0" />

另外说一下，淘宝对apple是做了二倍屏处理。所以是这样写的。

 <meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">

如果让我推荐，我会推荐淘宝的混合方案。因为我也是在实践当中，所以如果有什么的问题和意见可以留言。