[轉]再談移動端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。

對於要使用哪一種方案，仍是要落實到本身的項目中。

 

完。睡覺去。。。