一個多月前水了一篇移動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。
對于要使用哪種方案，還是要落實到自己的項目中。
完。睡覺去。。。
轉載于:https://www.cnblogs.com/zjzhome/p/4912868.html