html5 - 请教viewport的选择

我想问一下，淘宝对apple是做了二倍屏处里，initial-scale=0.5，他和正常的initial-scale=1有什么区别，一般做移动端页面要想达到完美适配使用哪种比较好呢，但是这里面牵扯了一个设备像素比的问题devicePixelRatio，默认是1，就是设备的屏幕宽度和文档的宽度是一样的，如果为2就是设备屏幕宽度为文档宽度的两倍大小，这里面的换算是怎么算的？对这个换算有点晕，哪位大神可否讲一讲呢！！急求急求，给个开发移动端比较好的办法，我看淘宝的首页完全是动态算出来的

我们是一家做web前端开发的公司，也是用的viewport定宽的方式 ，因为这样好布局，相对比100%宽度，定宽更好去做复杂的布局，并且在pc上依然很好看，仅供参考。

对图文混排支持的不好

对css3的某些属性支持不好

定宽有个坑，就是如果你的页面要嵌入到App中时，App是以webview的形式渲染页面的。webview实际上也是webkit内核，而最新的webkit内核对定宽支持不是很好，他默认是以device-width来渲染的。这样一来你的页面就被放大了，窗口还有滚动条，解决办法是让app开发帮忙设置两个属性：
WebSettings webSettings = view.getSettings(); webSettings.setLayoutAlgorithm(LayoutAlgorithm.NARROW_COLUMNS);
webSettings.setUseWideViewPort(true);
可是App开发说这样影响性能。所以我觉得用device-width是最靠谱的。

说说淘宝的首页

我先说说淘宝的首页，现在只有首页是用了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">

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