[转]再谈移动端Web屏幕适配 移动web屏幕适配方案 移动web屏幕适配方案

一个多月前水了一篇移动web屏幕适配方案，当时噼里啪啦的写了一通，自我感受甚是良好。不过最近又有一些新的想法，和以前的有一些不一样。

 

先说一下淘宝的方案，感受如今好多的适配方案都是受了它的影响，上周六看了winter在一个会议的分享，讲到了这个方案。如今你谷歌一下移动web适配，绝对能够看到不少相似的，切活动页的童鞋都忍不住试一把。这些方案和个人博客写的其实仍是类似的，就是抛弃了那种viewport直接缩放，而后给定html的初始font-size值，使用rem这个单位。

在屏幕的设备像素比上，也只是判断了IOS设备的，Android的设备统一以1倍屏幕来处理：

虽然Android机型中也有不少高清甚至超高清屏幕，可是碎片化也严重，这样处理实际上是下降了适配成本：

上图来自http://www.quirksmode.org/，对于rem这个单位给出的是beware。

这个方案，写起来挺爽，但若是自身能力不足或者团队没有有力的支撑，效果不会很好，好比字体是否是要用rem，用了rem产生不少小数点浏览器的解析各异，或者不用rem，对于每种屏幕应该设置多大的字体，一些间距什么的会致使有那么1px的偏差，视觉妹妹分分钟看透；对于Android的某些机型甚至是2.x的适配。这种方案通常人看来，就是“嗯，看起来是这样，好像用起来不错的样子”这种感受，不必定能hold住。以前本身的方案如今看来依然有巨多的问题。

 

而后是media query，想必咱们最先对响应式的概念就是他了，我的感受若是须要作到PC移动端都能有好的表现效果，这种方式是最好的，若是项目只是针对移动端，就有些力不从心。还不如JS计算来的爽快。

 

而后是这个：

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

将宽度设置为640px，和设计稿同样的尺寸，让浏览器本身去缩放以适应屏幕，这样你就直接按照视觉稿切就好了，特别适合推广页活动页神马的。并且border 1px的问题也是妥妥的解决了，这看起来有点像第一种方案的动态设置viewport缩放。不过有些手机字体会有一些模糊，不过应该在容忍范围内。

 

最后呢是经典的320px：

<meta name="viewport" content="width=320,initial-scale=1,user-scalable=no" />

或者

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

视觉给的640px的图，除以2，也就是移动web屏幕适配方案这里一开头提到的前辈的方案，确实足够简单并且基本没有什么问题，惟一的问题就是高清屏幕上字也是那么小，可是好像也不会有什么太大的问题。或许你也在别的地方看到initial-scale设置为1.3的介绍，也就是viewport缩放了。并且若是你的项目要支持到android2.x的坑爹系统，或许这个方案是最好的，经测试，rem表现坑爹。

 

又说了这么多废话，其实想说的是，各类方案其实都有viewport缩放的影子，而淘宝的方案是一个集大成的产品，对几乎每一种屏幕作了适应，对字体图片都作了处理。winter在分享中说道（大概意思）：其实你们一直都在320，作的也不错，并且很温馨，可是咱们想打破这种温馨，引导你们去使用rem。

对于要使用哪一种方案，仍是要落实到本身的项目中。

 

完。睡觉去。。。