一個多月前水了一篇移動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。
對於要使用哪種方案，還是要落實到自己的項目中。
完。睡覺去。。。